Alain Chautard
Apr 25, 2019 · 4 min read

ng-content is the directive used to achieve transclusion a.k.en innholdsprojeksjon

hvis Du lærte Angular JS før du byttet Til Angular, kan du være kjent med begrepet transklusjon. På den annen side, hvis du ikke har noen anelse om hva transklusjon er, er det nye navnet på Det I Angular innholdsprojeksjon, og det er det vi skal dekke i dette innlegget.

Innholdsprojeksjon består i å overføre EN del AV DOM-treet fra en overordnet komponent til en underordnet komponent.Det er perfekt å bygge gjenbrukbare komponenter som dialoger, modaler, faner og lignende.

Her er et eksempel der jeg vil lage et popup-vindu med tilpassbart innhold, og jeg vil gjerne «passere» det innholdet til popup-vinduet som følger:

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

Merk at jeg også sender en tittel som en inngang til den komponenten. Nå, som standard, ville koden ovenfor ikke projisere innholdet. For å få innholdsprojeksjon til å skje, må vi legge til ng-innholdsdirektivet et sted i malen til barnekomponenten:

<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 fungerer veldig mye som router-uttak: Det er et direktiv som angir hvor dynamisk innhold skal lastes.En annen måte å vikle hodet rundt innholdsprojeksjon er at det i utgangspunktet skal «klippe og lime» den genererte HTML-EN fra foreldrekomponenten inn I HTML-malen til barnekomponenten, og AT HTML skal «limes» der ng-innhold er plassert.

når vi har koden ovenfor på plass, gjør popup-vinduet som følger:

du finner hele koden for dette eksemplet i denne stackblitz:

kan dette projiserte innholdet være dynamisk?

Selvfølgelig kan det! Du kan bruke alle databindinger, direktiver eller andre komponenter hvis du vil.

her er et eksempel:

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

Og alt dette fungerer helt fint:

hele koden for dette andre eksemplet finner du i denne stackblitz:

hva om jeg vil projisere flere ting på forskjellige steder?

jeg er glad du spurte. Dette kalles multi-slot content projection.

La oss anta at vi ønsker å endre vår pop-up vindu slik at vi kan passere en tilpasset kropp samt en tilpasset bunntekst til det.

Vi skal bruke to ng-innholdsdirektiver i den komponenten, og nøkkelen er å få disse to sporene til å velge en bestemt del av det projiserte innholdet ved hjelp av følgende syntaks:

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

nå for å sende innhold til disse spesifikke sporene, er alt jeg trenger å gjøre, å bruke koder som samsvarer med utvalgskriteriene som er gitt ovenfor:

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

merk at jeg brukte Kropp og bunntekst fordi de er faktiske html-elementer som gir mening i den konteksten. Likevel kan du velge elementer ETTER CSS-klasse, attributtnavn eller noe du liker. Du trenger ikke å gjøre det akkurat slik jeg gjorde her.

Som du kan se, fungerer det pent:

jeg brukte en annen farge på bunnteksten, slik at vi kan se at innholdet ble transkludert i riktig spor

hele koden for dette siste eksemplet finnes i denne stackblitz:

mitt navn er alain chautard. Jeg Er En Google Developer Expert I Angular, samt grunnleggende konsulent og trener På Angular Training hvor jeg hjelper utviklingsteam å lære og bli dyktige med Angular.

Trenger du Hjelp Med Angular? La oss planlegge litt tid til å snakke.

hvis du likte dette innlegget, vennligst klapp for det eller del det. Din hjelp er alltid verdsatt.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.