Alain Chautard
Apr 25, 2019 · 4 min read

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

Se hai imparato Angular JS prima di passare ad Angular, potresti avere familiarità con il termine transclusion. D’altra parte, se non hai idea di cosa sia la transclusione, il nuovo nome per esso in Angular è la proiezione dei contenuti, ed è quello che tratteremo in questo post.

La proiezione del contenuto consiste nel passare una parte dell’albero DOM da un componente genitore a un componente figlio.

È perfetto per creare componenti riutilizzabili come finestre di dialogo, modali, schede e simili.

Ecco un esempio in cui voglio creare una finestra pop-up con contenuti personalizzabili e mi piacerebbe “passare” quel contenuto al pop-up come segue:

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

Nota che sto anche passando un titolo come input a quel componente. Ora, per impostazione predefinita, il codice sopra non proietterebbe il contenuto. Per far sì che la proiezione del contenuto avvenga, dobbiamo aggiungere la direttiva ng-content da qualche parte nel modello del componente figlio:

<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 funziona molto come router-outlet: È una direttiva che indica dove verrà caricato il contenuto dinamico.

Un altro modo per aggirare la proiezione del contenuto è che fondamentalmente “taglia e incolla” l’HTML generato dal componente genitore nel modello HTML del componente figlio e che l’HTML verrà “incollato” dove si trova ng-content.

Una volta che abbiamo il codice di cui sopra in atto, il pop-up rende come segue:

È possibile trovare il codice completo, per esempio, in questo Stackblitz:

è Possibile questo contenuto proiettato essere dinamico?

Certo, può! È possibile utilizzare qualsiasi associazione di dati, direttive o anche altri componenti, se lo si desidera.

Ecco un esempio:

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

E tutto questo funziona perfettamente:

Il codice completo per questo secondo esempio può essere trovato in questo Stackblitz:

che Cosa succede se voglio progetto più cose in posti diversi?

Sono contento che tu abbia chiesto. Questo è chiamato multi-slot content projection.

Supponiamo di voler cambiare la nostra finestra pop-up in modo da poter passare un corpo personalizzato e un piè di pagina personalizzato ad esso.

stiamo andando a utilizzare due ng-content direttive in quel componente, e la chiave è quello di rendere i due slot selezionare una parte specifica dei contenuti proiettati utilizzando la seguente sintassi:

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

Ora, per passare al contenuto di tali specifiche slot, tutto quello che devo fare è utilizzare i tag che corrispondono ai criteri di cui sopra:

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

Nota che ho usato per il corpo e piè di pagina, perché sono veri e propri elementi HTML che senso in quel contesto. Tuttavia, puoi selezionare gli elementi in base alla classe CSS, al nome dell’attributo o a qualsiasi cosa tu voglia. Non c’è bisogno di farlo esattamente come ho fatto io qui.

Come si può vedere, funziona bene:

ho applicato un colore diverso per il piè di pagina in modo che possiamo vedere che il contenuto è stato transcluded nell’alloggiamento destro

Il codice completo per questo ultimo esempio può essere trovato in questa Stackblitz:

il Mio nome è Alain caterina da siena. Sono un esperto di Google Developer in Angular, nonché consulente fondatore e formatore presso Angular Training dove aiuto i team di sviluppo a imparare e diventare esperti con Angular.

Hai bisogno di aiuto con Angular? Programmiamo un po ‘ di tempo per parlare.

Se ti è piaciuto questo post, si prega di applaudire per esso o condividerlo. Il tuo aiuto è sempre apprezzato.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.