Alain Chautard
Apr 25, 2019 · 4 min read

ng-content is the directive used to achieve transclusion a.k.egy tartalomvetítés

Ha Angular JS-t tanultál az Angular-ra váltás előtt, akkor lehet, hogy ismered a transzklúzió kifejezést. Másrészt, ha fogalmad sincs arról, hogy mi a transzklúzió, az Angular új neve a tartalomvetítés, és ezt fogjuk lefedni ebben a bejegyzésben.

a Tartalomvetítés abból áll, hogy a DOM fa egy részét egy szülő komponensből egy gyermek komponensbe továbbítják.

tökéletes újrafelhasználható összetevők, például párbeszédpanelek, modálok, fülek és hasonlók készítéséhez.

itt van egy példa, ahol létre akarok hozni egy felugró ablakot testreszabható tartalommal, és szeretném “átadni” ezt a tartalmat az előugró ablaknak az alábbiak szerint:

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

vegye figyelembe, hogy egy címet is átadok az összetevő bemeneteként. Most alapértelmezés szerint a fenti kód nem vetíti ki a tartalmat. Annak érdekében, hogy a tartalomvetítés megtörténjen, hozzá kell adnunk az ng-tartalom irányelvet valahol a gyermekkomponens sablonjához:

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

az ng-tartalom nagyon hasonlít a router-outlethez: Ez egy irányelv, amely jelzi a dinamikus tartalom betöltésének helyét.

egy másik módja annak, hogy a fejünket a tartalomvetítés köré fordítsuk, hogy alapvetően “kivágjuk és beillesztjük” a generált HTML-t a szülő összetevőből a gyermek összetevő HTML-sablonjába, és hogy a HTML-t “beillesztjük” oda, ahol az ng-tartalom található.

miután a fenti kód a helyén van, az előugró ablak a következőképpen jelenik meg:

a példa teljes kódját ebben a stackblitzben találja:

dinamikus lehet ez a vetített tartalom?

természetesen lehet! Bármilyen adatkötést, irányelvet vagy akár más összetevőt is használhat, ha akarja.

íme egy példa:

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

és mindez tökéletesen működik:

a második példa teljes kódja megtalálható ebben a stackblitzben:

mi van, ha több dolgot akarok kivetíteni különböző helyekre?

örülök, hogy megkérdezte. Ez az úgynevezett multi-slot tartalom vetítés.

tegyük fel, hogy meg akarjuk változtatni a felugró ablakot, hogy átadhassunk egy egyéni testet, valamint egy egyéni láblécet.

két ng-tartalom irányelvet fogunk használni ebben a komponensben, és a legfontosabb az, hogy ez a két nyílás a következő szintaxis segítségével válassza ki a vetített tartalom egy adott részét:

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

most Ahhoz, hogy a tartalmat átadjam ezeknek a specifikus réseknek, csak annyit kell tennem, hogy olyan címkéket használok, amelyek megfelelnek a fenti kiválasztási kritériumoknak:

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

megjegyzendő, hogy azért használtam a body and footer-t, mert ezek tényleges HTML elemek, amelyeknek van értelme ebben a kontextusban. Mégis, akkor válassza ki az elemeket CSS osztály, attribútum neve, vagy bármi tetszik. Nem kell pontosan úgy csinálni, ahogy itt tettem.

mint látható, szépen működik:

div>

más színt alkalmaztam a láblécre, így láthatjuk, hogy a tartalom a jobb oldali nyílásba került

a végső példa teljes kódja ebben a stackblitzben található:

a nevem Alain chautard. Google fejlesztői szakértő vagyok az Angular területén, valamint alapító tanácsadó és tréner vagyok az Angular Trainingnél, ahol segítek a fejlesztőcsapatoknak tanulni és jártasak lenni az Angularban.

segítségre van szüksége Angular? Ütemezzünk egy kis időt a beszélgetésre.

Ha tetszett ez a bejegyzés, kérjük, tapsoljon érte, vagy ossza meg. A segítséget mindig értékelik.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.