La proprietà hostDirectives
Associare direttive all'host di un componente
La proprietà hostDirectives è 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.
API di composizione delle direttive
La Directive Composition API consente a un componente o a una direttiva di applicare dichiarativamente altre direttive al proprio elemento host, tramite la proprietà hostDirectives. In questo modo è possibile riutilizzare i comportamenti senza ricorrere all'ereditarietà.
Il problema che risolve
In precedenza, per riutilizzare il comportamento di una direttiva era necessario ripeterla in ogni template oppure utilizzare l'ereditarietà. hostDirectives compone direttamente i comportamenti sull'host.
Sintassi di base
Elenchi le direttive nell'array hostDirectives dei metadati del componente.
@Component({
selector: 'app-menu',
hostDirectives: [CdkTrapFocus],
template: '<ng-content></ng-content>'
})
export class MenuComponent {}Cosa succede
Angular applica automaticamente CdkTrapFocus a ogni elemento host app-menu. Chi utilizza il componente ottiene il comportamento senza dover aggiungere personalmente la direttiva.
Requisiti
Le direttive host devono essere standalone. Deve fare riferimento direttamente alla classe della direttiva, non al suo selettore.
Più direttive host
Componga diversi comportamenti elencandoli tutti.
hostDirectives: [
HighlightDirective,
TooltipDirective,
CdkTrapFocus
]Applicare a una direttiva
Anche una direttiva può avere direttive host, consentendo di creare comportamenti stratificati e componibili.
@Directive({
selector: '[appCard]',
hostDirectives: [HoverElevateDirective]
})
export class CardDirective {}Ordine del ciclo di vita
Le direttive host vengono istanziate prima della logica del costruttore dell'host, quindi la loro configurazione è disponibile quando l'host viene inizializzato.
Dependency Injection
Le direttive host possono essere iniettate nell'host e viceversa tramite l'iniettore dell'elemento, consentendo il coordinamento tra i comportamenti composti.
private trap = inject(CdkTrapFocus);Nessuna modifica al template
Il vantaggio principale è che chi utilizza app-menu non deve conoscere CdkTrapFocus. Il comportamento è incapsulato nella definizione del componente.
Quando utilizzarla
Utilizzi hostDirectives per raggruppare in modo pulito e riutilizzabile comportamenti trasversali, come trappole per il focus, effetti ripple e analisi, all'interno di componenti o direttive.
Controllo rapido
Verifichi la Sua comprensione di hostDirectives.
Riepilogo
Ha imparato che la proprietà hostDirectives applica automaticamente direttive standalone all'elemento host di un componente o di una direttiva, consentendo di riutilizzare i comportamenti tramite composizione, senza modificare i template né usare l'ereditarietà.
Domande Frequenti
La lezione «La proprietà hostDirectives» è gratuita?
Sì — il testo completo di «La proprietà hostDirectives» è 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 «La proprietà hostDirectives»?
Associare direttive all'host di un componente 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 «La proprietà hostDirectives»?
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
- La proprietà hostDirectives
- Esporre input e output
- Creare comportamenti riutilizzabili
- Composizione e ereditarietà