Alain Chautard
Apr 25, 2019 · 4 min read

ng-content is the directive used to achieve transclusion a.k.o proiecție de conținut

Dacă ați învățat Angular JS înainte de a trece la Angular, s-ar putea să fiți familiarizați cu termenul de transcludere. Pe de altă parte, dacă nu aveți idee ce este transcluzia, noul nume pentru aceasta în Angular este proiecția conținutului și asta vom acoperi în această postare.

proiecția conținutului constă în trecerea unei porțiuni din arborele DOM de la o componentă părinte la o componentă copil.este perfect pentru a construi componente reutilizabile, cum ar fi dialoguri, modals, File, și altele asemenea.

Iată un exemplu în care vreau să creez o fereastră pop-up cu conținut personalizabil și aș dori să „transmit” acel conținut în fereastra pop-up după cum urmează:

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

rețineți că transmit și un titlu ca intrare la acea componentă. Acum, în mod implicit, codul de mai sus nu ar proiecta conținutul. Pentru a face proiecția conținutului să se întâmple, trebuie să adăugăm Directiva ng-content undeva în șablonul componentei copil:

<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 funcționează foarte mult ca router-outlet: Este o directivă care indică unde va fi încărcat conținutul dinamic.

o altă modalitate de a vă înfășura capul în jurul proiecției conținutului este că practic va „tăia și lipi” HTML-ul generat din componenta părinte în șablonul HTML al componentei copil și că HTML va fi „lipit” acolo unde se află conținutul ng.

odată ce avem Codul de mai sus în loc, pop-up face după cum urmează:

puteți găsi codul complet pentru acest exemplu în acest stackblitz:

poate acest conținut proiectat să fie dinamic?

desigur, se poate! Puteți utiliza orice legături de date, directive sau chiar alte componente dacă doriți.

Iată un exemplu:

<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 toate acestea funcționează perfect:

codul complet pentru acest al doilea exemplu poate fi găsit în acest stackblitz:

ce se întâmplă dacă vreau să proiectez mai multe lucruri în locuri diferite?

mă bucur că ai întrebat. Aceasta se numește proiecție de conținut multi-slot.

Să presupunem că vrem să schimbăm fereastra pop-up, astfel încât să putem trece un corp personalizat, precum și un subsol personalizat.

vom folosi două directive privind conținutul ng în acea componentă, iar cheia este de a face ca aceste două sloturi să selecteze o porțiune specifică a conținutului proiectat folosind următoarea sintaxă:

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

acum, pentru a transmite conținut acestor sloturi specifice, tot ce trebuie să fac este să folosesc etichete care corespund criteriilor de selecție furnizate mai sus:

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

rețineți că am folosit corp și subsol, deoarece acestea sunt elemente HTML reale care au sens în acest context. Cu toate acestea, puteți selecta elemente după clasa CSS, numele atributului sau orice doriți. Nu este nevoie să o fac exact așa cum am făcut-o aici.

după cum puteți vedea, funcționează frumos:

am aplicat o culoare diferită la subsol, astfel încât să putem vedea că conținutul a fost transcris în slotul din dreapta

codul complet pentru acest exemplu final poate fi găsit în acest stackblitz:

numele meu este Alain Chautard. Sunt expert în Dezvoltatori Google în Angular, precum și consultant fondator și trainer la Angular Training, unde ajut echipele de dezvoltare să învețe și să devină competente cu Angular.

aveți nevoie de ajutor cu Angular? Să programăm ceva timp pentru a vorbi.

dacă v-a plăcut această postare, vă rugăm să aplaudați sau să o împărtășiți. Ajutorul tău este întotdeauna apreciat.

Lasă un răspuns

Adresa ta de email nu va fi publicată.