Alain Chautard
Apr 25, 2019 · 4 min read

ng-content is the directive used to achieve transclusion a.k.projekcja treści

jeśli nauczyłeś się Angular JS przed przejściem na Angular, możesz znać termin transclusion. Z drugiej strony, jeśli nie masz pojęcia, czym jest transclusion, nowa nazwa dla niego w Angular to content projection, i to właśnie omówimy w tym poście.

projekcja zawartości polega na przekazaniu części drzewa DOM z komponentu nadrzędnego do komponentu podrzędnego.

jest idealny do budowania komponentów wielokrotnego użytku, takich jak okna dialogowe, Modale, karty i tym podobne.

oto przykład, w którym chcę utworzyć wyskakujące okno z konfigurowalną zawartością i chciałbym „przekazać” tę zawartość do wyskakującego okna w następujący sposób:

<app-popup-window ="showPopup" title="Test pop-up"> This is the content of the pop-up (thanks to transclusion aka content projection)</app-popup-window>

zauważ, że przekazuję również tytuł jako wejście do tego komponentu. Domyślnie powyższy kod nie wyświetli treści. Aby wyświetlanie zawartości mogło nastąpić, musimy dodać dyrektywę ng-content gdzieś w szablonie komponentu podrzędnego:

<div class="modalW-content">
<div class="modalW-header">
<h2>{{title}}</h2>
</div>
<div class="modalW-body">
<!-- Our content will be projected here -->
<ng-content></ng-content>
</div>
</div>

ng-content działa bardzo podobnie jak router-outlet: Jest to dyrektywa, która wskazuje, gdzie zawartość dynamiczna zostanie załadowana.

innym sposobem na objęcie głowy projekcją treści Jest to, że w zasadzie będzie „wyciąć i wkleić” wygenerowany kod HTML z komponentu nadrzędnego do szablonu HTML komponentu podrzędnego i że HTML zostanie „wklejony” tam, gdzie znajduje się ng-content.

gdy już mamy powyższy kod na miejscu, wyskakujące okienko renderuje się w następujący sposób:

możesz znaleźć pełny kod tego przykładu w tym stackblitz:

czy ta wyświetlana zawartość może być dynamiczna?

oczywiście, że tak! Możesz użyć dowolnych powiązań danych, dyrektyw lub nawet innych komponentów, jeśli chcesz.

oto przykład:

<app-popup-window ="showPopup" title="Test pop-up">
This is the content of the pop-up.
{{customText}} <br>
I can even pass a child component: <br>
<app-hello></app-hello>
</app-popup-window>

i wszystko to działa idealnie:

pełny kod tego drugiego przykładu można znaleźć w tym stackblitz:

co zrobić, jeśli chcę wyświetlać wiele rzeczy w różnych miejscach?

cieszę się, że pytasz. Nazywa się to projekcją zawartości Multi-slot.

Załóżmy, że chcemy zmienić nasze wyskakujące okno, abyśmy mogli przekazać do niego niestandardową treść, a także niestandardową stopkę.

użyjemy dwóch dyrektyw ng-content w tym komponencie, a kluczem jest to, aby te dwa sloty wybrały konkretną część wyświetlanej zawartości przy użyciu następującej składni:

<div class="modalW-body">
<ng-content select="body"></ng-content>
</div><div class="modalW-footer">
<ng-content select="footer"></ng-content>
</div>

teraz, aby przekazać zawartość do tych konkretnych slotów, wszystko, co muszę zrobić, to użyć tagów, które spełniają kryteria wyboru podane powyżej:

<app-popup-window ="showPopup" title="Test pop-up">
<body>
This is the body of the pop-up.
</body>
<footer>
<button (click)="showPopup = false">Close</button>
</footer>
</app-popup-window>

zauważ, że użyłem body I footer, ponieważ są to rzeczywiste elementy HTML, które mają sens w tym kontekście. Możesz jednak wybierać elementy według klasy CSS,nazwy atrybutu lub czegokolwiek, co chcesz. Nie musisz robić tego dokładnie tak, jak ja tutaj.

jak widać, działa ładnie:

zastosowałem inny kolor do stopki, abyśmy mogli zobaczyć, że zawartość została przetranslowana w prawym gnieździe

Pełny kod tego ostatniego przykładu można znaleźć w tym stackblitz:

Nazywam się Alain chautard. Jestem ekspertem Google Developer w Angular, a także konsultantem założycielem i trenerem w Angular Training, gdzie pomagam zespołom programistycznym uczyć się i stawać się biegłym w Angular.

potrzebujesz pomocy z Angular? Umówmy się na rozmowę.

Jeśli podobał Ci się ten post, proszę o oklaski lub podziel się nim. Twoja pomoc jest zawsze mile widziana.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.