Alain Chautard
Apr 25, 2019 · 4 min read

ng-content is the directive used to achieve transclusion a.k.obsah projekce

Pokud jste se naučili Angular JS před přechodem na Úhlové, ty by mohly být obeznámeni s termínem vkládání. Na druhou stranu, pokud máte tušení, co přebírání je, že nový název v Hranaté je obsah projekce, a to je to, co budeme pokrývat v tomto příspěvku.

projekce obsahu spočívá v předání části stromu DOM z nadřazené komponenty do podřízené komponenty.

je ideální pro vytváření opakovaně použitelných komponent, jako jsou dialogy, modály, karty a podobně.

Zde je příklad, kde chci vytvořit pop-up okno s přizpůsobitelné obsahu, a rád bych, aby „projít“, že obsah do pop-up takto:

<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>

Všimněte si, že jsem také kolem hlavy jako vstupní komponenta. Nyní, ve výchozím nastavení, výše uvedený kód nebude promítat obsah. Aby obsah projekce stane, musíme přidat ng-obsah směrnice někde v šabloně dítěte součásti:

<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-obsah funguje velmi podobně jako router-outlet: Je to směrnice, která označuje, kam se bude načítat dynamický obsah.

Další způsob, jak zabalit hlavu kolem obsahu projekce je, že je v podstatě „vyjmout a vložit“ HTML generovaný z nadřazené složky do HTML šablony dítěte komponentu a to HTML bude „vložit“, kde ng-obsah nachází.

jakmile máme výše uvedený kód na místě, vyskakovací okno se vykreslí následovně:

Můžete najít úplný kód pro tento příklad v této Stackblitz:

Může tento předpokládaný obsah být dynamický?

samozřejmě, že může! Můžete použít libovolné datové vazby, směrnice nebo dokonce jiné komponenty, pokud chcete.

zde je příklad:

<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>

a to vše funguje naprosto v pořádku:

Kompletní kód pro tento druhý příklad lze nalézt v této Stackblitz:

Co když chci, aby se projekt více věcí v různých místech?

jsem rád, že jste se zeptal. Tento jev se nazývá multi-slot obsah projekce.

předpokládejme, že chceme změnit naše vyskakovací okno, abychom mu mohli předat vlastní tělo i vlastní zápatí.

použijeme dvě ng-obsah směrnic, které součásti a klíčové je, aby se ti dva sloty, vyberte konkrétní část promítaného obsahu pomocí následující syntaxe:

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

Nyní, aby se projít obsah těchto zvláštních sloty, vše, co musíte udělat, je použít tagy, které odpovídají kritériím výběru uvedeným výše:

<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>

Všimněte si, že jsem použil tělo a zápatí, protože jsou skutečné HTML prvky, které dávají smysl v daném kontextu. Přesto můžete vybrat prvky podle třídy CSS, názvu atributu nebo cokoli, co se vám líbí. Není třeba to dělat přesně tak, jak jsem to udělal tady.

Jak můžete vidět, funguje to pěkně:

jsem použila jinou barvu na zápatí, takže můžeme vidět, že obsah byl transcluded v pravém slotu

kompletní kód pro tento poslední příklad lze nalézt v této Stackblitz:

Moje jméno je Alain Chautard. Jsem Google Developer Expert v Angular, stejně jako zakládající konzultant a trenér v Angular Training, kde pomáhám vývojovým týmům učit se a zdokonalovat se v Angular.

potřebujete pomoc s úhlovou? Pojďme si naplánovat nějaký čas na rozhovor.

Pokud se vám tento příspěvek líbil, tleskejte za něj nebo jej sdílejte. Vaše pomoc je vždy oceněna.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.