Exposer les entrées et les sorties
Exposez les entrées et les sorties des directives hôtes
Exposer les entrées et les sorties est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Exposer les API composées
Lorsque vous composez une directive via hostDirectives, ses entrées et sorties sont masquées par défaut. L’API de composition vous permet d’exposer certaines entrées et sorties dans l’API publique de l’hôte.
La forme objet
Au lieu de répertorier uniquement la classe, utilisez un objet contenant les tableaux directive, inputs et outputs.
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText'],
outputs: ['tooltipShown']
}]Exposer une entrée
La mention d’un nom d’entrée dans inputs permet aux utilisateurs de le lier sur l’élément hôte.
<app-button tooltipText="Save changes"></app-button>Exposer une sortie
La mention d’une sortie permet à l’hôte de réémettre les événements de cette directive.
<app-button (tooltipShown)="onShown()"></app-button>Renommer lors de l’exposition
Utilisez la forme publicName: internalName pour renommer une entrée ou une sortie au moment de l’exposer.
inputs: ['tooltipText: hint']
// consumers bind [hint]="..."Renommer les sorties
Les sorties se renomment de la même manière.
outputs: ['tooltipShown: shown']
// template: (shown)="..."Pourquoi les masquer par défaut ?
Masquer les entrées et sorties composées permet de conserver une API d’hôte intentionnelle. Vous n’exposez que ce qui est pertinent pour les utilisateurs, sans divulguer les détails internes des directives.
Combiner avec ses propres entrées
L’hôte peut avoir ses propres entrées en plus de celles qui sont exposées ; Angular les fusionne en une seule API publique sur l’élément.
@Component({
selector: 'app-button',
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText']
}]
})
export class ButtonComponent {
label = input('');
}Conflits de noms
Si le nom d’une entrée exposée entre en conflit avec celui d’une entrée propre à l’hôte, le renommage évite le conflit et clarifie l’intention.
Liaisons bidirectionnelles
Pour prendre en charge une liaison bidirectionnelle par composition, exposez à la fois l’entrée et la sortie Change correspondante avec des noms cohérents.
Bonne pratique
Exposez la surface minimale, aux noms clairs, dont les utilisateurs ont besoin. Renommez les noms internes pour les adapter au vocabulaire de votre composant, et non à celui de la directive sous-jacente.
Vérification rapide
Évaluez votre compréhension de l’exposition des entrées et des sorties.
Récapitulatif
Vous avez appris que la forme objet de hostDirectives expose les inputs et outputs sélectionnés dans l’API de l’hôte, avec un renommage facultatif au moyen de publicName: internalName, afin de conserver une surface publique intentionnelle.
Questions Fréquemment Posées
La leçon « Exposer les entrées et les sorties » est-elle gratuite ?
Oui — le texte complet de « Exposer les entrées et les sorties » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Exposer les entrées et les sorties » ?
Exposez les entrées et les sorties des directives hôtes Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Exposer les entrées et les sorties » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- La propriété hostDirectives
- Exposer les entrées et les sorties
- Créer des comportements réutilisables
- Composition ou héritage