La propriété hostDirectives
Attachez des directives à l’hôte d’un composant
La propriété hostDirectives est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.
API de composition des directives
L’API de composition des directives permet à un composant ou à une directive d’appliquer déclarativement d’autres directives à son propre élément hôte, via la propriété hostDirectives. Cela permet de réutiliser des comportements sans héritage.
Le problème résolu
Auparavant, pour réutiliser le comportement d’une directive, il fallait soit répéter la directive dans chaque modèle, soit utiliser l’héritage. hostDirectives compose directement les comportements sur un hôte.
Syntaxe de base
Répertoriez les directives dans le tableau hostDirectives des métadonnées du composant.
@Component({
selector: 'app-menu',
hostDirectives: [CdkTrapFocus],
template: '<ng-content></ng-content>'
})
export class MenuComponent {}Ce qui se passe
Angular applique automatiquement CdkTrapFocus à chaque élément hôte app-menu. Les utilisateurs bénéficient directement de ce comportement, sans devoir ajouter eux-mêmes la directive.
Conditions requises
Les directives hôtes doivent être autonomes. Vous référencez directement la classe de la directive, et non son sélecteur.
Plusieurs directives hôtes
Composez plusieurs comportements en les répertoriant tous.
hostDirectives: [
HighlightDirective,
TooltipDirective,
CdkTrapFocus
]Appliquer à une directive
Une directive peut également posséder des directives hôtes, ce qui vous permet de créer des comportements en couches et composables.
@Directive({
selector: '[appCard]',
hostDirectives: [HoverElevateDirective]
})
export class CardDirective {}Ordre du cycle de vie
Les directives hôtes sont instanciées avant la logique du constructeur de l’hôte lui-même ; leur initialisation est donc disponible lorsque l’hôte s’initialise.
Injection de dépendances
Les directives hôtes peuvent être injectées dans l’hôte, et inversement, via l’injecteur de l’élément, ce qui permet de coordonner les comportements composés.
private trap = inject(CdkTrapFocus);Aucune modification du modèle
L’avantage principal : les utilisateurs de app-menu n’ont pas besoin de connaître CdkTrapFocus. Le comportement est encapsulé dans la définition du composant.
Quand l’utiliser
Utilisez hostDirectives pour regrouper proprement et de manière réutilisable des comportements transversaux (piégeage du focus, effet d’ondulation, analyse) dans des composants ou des directives.
Vérification rapide
Vérifiez votre compréhension de hostDirectives.
Récapitulatif
Vous avez appris que la propriété hostDirectives applique automatiquement des directives autonomes à l’élément hôte d’un composant ou d’une directive, ce qui permet de réutiliser des comportements par composition, sans modifier les modèles ni recourir à l’héritage.
Questions Fréquemment Posées
La leçon « La propriété hostDirectives » est-elle gratuite ?
Oui — le texte complet de « La propriété hostDirectives » 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 « La propriété hostDirectives » ?
Attachez des directives à l’hôte d’un composant 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 1 sur 4.
Combien de temps prend la leçon « La propriété hostDirectives » ?
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