Angular Academy · Lezione

Proiezione del contenuto in uno slot

Proiettare il contenuto con ng-content

Proiezione del contenuto in uno slot è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Che cos'è la proiezione del contenuto

La proiezione del contenuto consente a un componente di ricevere il markup dal proprio componente padre e di visualizzarlo all'interno del proprio template. È l'equivalente Angular degli «slot» nei web component.

Il componente padre scrive il contenuto tra i tag del componente, mentre il componente decide dove visualizzarlo.

Perché è necessaria

Wrapper riutilizzabili come card, dialoghi e pannelli non conoscono in anticipo il proprio contenuto. La proiezione del contenuto li trasforma in contenitori flessibili.

Crei una card una sola volta e la riempia con qualsiasi contenuto
Mantenga la logica del layout nel componente
Mantenga il contenuto nel componente utilizzatore

L'elemento ng-content

L'elemento <ng-content> indica il punto in cui viene inserito il contenuto proiettato. Una configurazione con un solo slot utilizza esattamente un <ng-content> senza attributo select.

@Component({
  selector: 'app-card',
  template: '<div class="card"><ng-content></ng-content></div>'
})
export class CardComponent {}

Utilizzo del componente

Qualunque contenuto il componente padre inserisca tra i tag del componente viene proiettato nello slot.

<app-card>
  <h2>Hello</h2>
  <p>This text is projected into the card.</p>
</app-card>

Slot singolo = un punto di inserimento

Con un singolo slot senza nome, tutti i nodi proiettati vengono inseriti nell'unico <ng-content>. Non viene applicato alcun filtro e l'ordine viene preservato esattamente come è stato definito dal componente padre.

Contenuto predefinito

Può inserire markup di fallback all'interno di <ng-content>. Le versioni moderne di Angular visualizzano questo contenuto predefinito solo quando il componente utilizzatore non proietta nulla nello slot.

<div class="card">
  <ng-content>No content provided.</ng-content>
</div>

Applicazione degli stili al contenuto proiettato

Il contenuto proiettato appartiene alla view del componente padre, quindi viene stilizzato dagli stili del padre, non da quelli della card. Per raggiungere i nodi proiettati dalla card, utilizzi ::ng-deep con parsimonia oppure si affidi agli stili globali.

Contenuto e view

Angular distingue i content children (proiettati nel componente) dai view children (dichiarati nel template). Questo è importante per query come contentChild e viewChild.

icon = contentChild(IconComponent);

Ciclo di vita: ngAfterContentInit

Il contenuto proiettato è disponibile dopo l'esecuzione di ngAfterContentInit(). Lo utilizzi (oppure utilizzi ngAfterContentChecked) per leggere in modo sicuro i content children.

ngAfterContentInit() {
  console.log('Projected content ready');
}

Un esempio reale di pannello

Ecco un pannello riutilizzabile completo. Il componente utilizzatore controlla interamente il contenuto interno, mentre il pannello controlla la struttura esterna.

@Component({
  selector: 'app-panel',
  template: '<section class="panel"><ng-content></ng-content></section>',
  styles: ['.panel { border: 1px solid #ccc; padding: 16px; }']
})
export class PanelComponent {}

Errore comune

Inserire due volte lo stesso <ng-content> senza nome non duplica il contenuto. Angular proietta il contenuto solo nell'ultimo slot corrispondente. Utilizzi la proiezione multi-slot se ha bisogno di più aree.

Verifica rapida

Verifichi la Sua comprensione della proiezione con slot singolo.

Riepilogo

Ha imparato che la proiezione del contenuto utilizza <ng-content> per visualizzare nel componente il markup fornito dal componente padre. La proiezione con slot singolo utilizza un unico punto di inserimento senza nome, il contenuto proiettato appartiene alla view del padre ed è disponibile in ngAfterContentInit.

Domande Frequenti

La lezione «Proiezione del contenuto in uno slot» è gratuita?

Sì — il testo completo di «Proiezione del contenuto in uno slot» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Proiezione del contenuto in uno slot»?

Proiettare il contenuto con ng-content Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Proiezione del contenuto in uno slot»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy