Angular Academy · Lezione

Proiezione in più slot con select

Proiettare il contenuto in slot denominati

Proiezione in più slot con select è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 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.

Slot multipli

Molti componenti necessitano di diverse aree: un'intestazione, un corpo e un piè di pagina. Angular supporta questa esigenza con la proiezione multi-slot, utilizzando l'attributo select su <ng-content>.

L'attributo select

select accetta un selettore CSS. Ogni <ng-content select="..."> proietta solo i nodi che corrispondono a quel selettore.

<ng-content select="[card-header]"></ng-content>
<ng-content select="[card-body]"></ng-content>

Selezione per attributo

I selettori di attributo sono il modello più comune, perché risultano chiari nel markup del componente utilizzatore.

@Component({
  selector: 'app-card',
  template:
    '<header><ng-content select="[header]"></ng-content></header>' +
    '<main><ng-content select="[body]"></ng-content></main>'
})
export class CardComponent {}

Utilizzo degli slot con nome

Il componente utilizzatore contrassegna ogni parte del contenuto con l'attributo corrispondente.

<app-card>
  <h2 header>Title</h2>
  <p body>Some body text here.</p>
</app-card>

Selezione per elemento o classe

Può anche selezionare per nome dell'elemento o per classe CSS.

<ng-content select="card-title"></ng-content>
<ng-content select=".highlight"></ng-content>

Lo slot jolly

Un <ng-content> senza select cattura tutto ciò che non corrisponde a uno slot con nome. Lo inserisca per ultimo, come fallback.

<ng-content select="[header]"></ng-content>
<ng-content></ng-content>

L'ordine è importante

Angular valuta gli slot nell'ordine del template. Ogni nodo proiettato viene assegnato al primo slot corrispondente. Inserisca lo slot jolly dopo i selettori specifici, in modo che non catturi tutto.

Combinazione dei selettori

I selettori CSS possono essere combinati; ad esempio, select="button[primary]" seleziona un elemento button con un attributo primary.

<ng-content select="button[primary]"></ng-content>

Un componente di layout

Ecco una card con slot per intestazione, corpo e piè di pagina, oltre a uno slot jolly.

@Component({
  selector: 'app-card',
  template:
    '<header><ng-content select="[header]"></ng-content></header>' +
    '<section><ng-content></ng-content></section>' +
    '<footer><ng-content select="[footer]"></ng-content></footer>'
})
export class CardComponent {}

Ogni nodo viene proiettato una sola volta

Un determinato nodo proiettato corrisponde a un solo slot e viene visualizzato esattamente una volta. Non è possibile clonare lo stesso nodo in due slot tramite la proiezione.

Stili per slot

Poiché ogni slot si trova in una posizione DOM distinta, può racchiudere gli slot in contenitori con stili (intestazione/piè di pagina) per assegnare a ogni area un aspetto specifico.

Verifica rapida

Verifichi la Sua conoscenza della proiezione multi-slot.

Riepilogo

Ha imparato a creare componenti multi-slot con <ng-content select="...">. I selettori possono individuare attributi, elementi o classi; uno slot senza selettore funge da slot jolly e l'ordine determina quale slot ha la precedenza.

Domande Frequenti

La lezione «Proiezione in più slot con select» è gratuita?

Sì — il testo completo di «Proiezione in più slot con select» è 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 in più slot con select»?

Proiettare il contenuto in slot denominati 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 2 di 4.

Quanto tempo richiede la lezione «Proiezione in più slot con select»?

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