Esporre input e output
Rendere disponibili input e output della direttiva host
Esporre input e output è 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.
Esporre le API composte
Quando compone una direttiva tramite hostDirectives, i relativi input e output sono nascosti per impostazione predefinita. L'API di composizione consente di esporre input e output selezionati nell'API pubblica dell'host.
La forma a oggetto
Anziché elencare solo la classe, utilizzi un oggetto con gli array directive, inputs e outputs.
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText'],
outputs: ['tooltipShown']
}]Esposizione di un input
Inserire il nome di un input in inputs lo rende associabile all'elemento host da parte dei consumer.
<app-button tooltipText="Save changes"></app-button>Esposizione di un output
Elencare un output fa sì che l'host emetta nuovamente gli eventi di quella direttiva.
<app-button (tooltipShown)="onShown()"></app-button>Rinominare durante l'esposizione
Usi la forma publicName: internalName per rinominare un input o un output mentre lo espone.
inputs: ['tooltipText: hint']
// consumers bind [hint]="..."Rinominare gli output
Gli output si rinominano nello stesso modo.
outputs: ['tooltipShown: shown']
// template: (shown)="..."Perché nascondere per impostazione predefinita?
Nascondere gli input e gli output composti mantiene intenzionale l'API dell'host. Esponga solo ciò che è utile ai consumer, evitando di rendere visibili i dettagli interni delle direttive.
Combinazione con gli input propri
L'host può avere input propri oltre a quelli esposti; Angular li unisce in un'unica API pubblica dell'elemento.
@Component({
selector: 'app-button',
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText']
}]
})
export class ButtonComponent {
label = input('');
}Conflitti di nomi
Se il nome di un input esposto è in conflitto con un input proprio dell'host, rinominarlo evita il conflitto e rende più chiara l'intenzione.
Binding bidirezionali
Per supportare un binding bidirezionale tramite composizione, esponga sia l'input sia il relativo output Change, usando nomi coerenti.
Buona pratica
Esponga la superficie minima, con nomi chiari, necessaria ai consumer. Rinomini i nomi interni in base al vocabolario del componente, non a quello della direttiva sottostante.
Verifica rapida
Verifichi la Sua comprensione dell'esposizione di input e output.
Riepilogo
Ha imparato che la forma a oggetto di hostDirectives espone gli inputs e gli outputs selezionati nell'API dell'host, con la possibilità di rinominarli tramite publicName: internalName, mantenendo intenzionale la superficie pubblica.
Domande Frequenti
La lezione «Esporre input e output» è gratuita?
Sì — il testo completo di «Esporre input e output» è 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 «Esporre input e output»?
Rendere disponibili input e output della direttiva host 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 «Esporre input e output»?
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à