La propiedad hostDirectives
Asociar directivas al host de un componente
La propiedad hostDirectives es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
API de composición de directivas
La API de composición de directivas permite que un componente o una directiva aplique declarativamente otras directivas a su propio elemento host mediante la propiedad hostDirectives. Esto permite reutilizar código sin herencia.
El problema que resuelve
Antes, para reutilizar el comportamiento de una directiva, debía repetirla en cada plantilla o usar herencia. hostDirectives compone los comportamientos directamente en un host.
Sintaxis básica
Enumere las directivas en el array hostDirectives de los metadatos del componente.
@Component({
selector: 'app-menu',
hostDirectives: [CdkTrapFocus],
template: '<ng-content></ng-content>'
})
export class MenuComponent {}Qué ocurre
Angular aplica CdkTrapFocus automáticamente a cada elemento host app-menu. Los consumidores obtienen el comportamiento sin tener que añadir la directiva por su cuenta.
Requisitos
Las directivas host deben ser independientes. Debe hacer referencia directamente a la clase de la directiva, no a su selector.
Varias directivas host
Componga varios comportamientos incluyéndolos todos en la lista.
hostDirectives: [
HighlightDirective,
TooltipDirective,
CdkTrapFocus
]Aplicar a una directiva
Una directiva también puede tener directivas host, lo que permite crear comportamientos por capas y componibles.
@Directive({
selector: '[appCard]',
hostDirectives: [HoverElevateDirective]
})
export class CardDirective {}Orden del ciclo de vida
Las directivas host se instancian antes de la lógica del propio constructor del host, por lo que su configuración está disponible cuando el host se inicializa.
Inyección de dependencias
Las directivas host se pueden inyectar en el host (y viceversa) mediante el inyector del elemento, lo que permite coordinar los comportamientos compuestos.
private trap = inject(CdkTrapFocus);Sin cambios en la plantilla
La principal ventaja es que los consumidores de app-menu no necesitan conocer CdkTrapFocus. El comportamiento queda encapsulado en la definición del componente.
Cuándo usarlo
Use hostDirectives para agrupar de forma clara y reutilizable comportamientos transversales (trampa de foco, ripple y analítica) en componentes o directivas.
Comprobación rápida
Compruebe su comprensión de hostDirectives.
Resumen
Ha aprendido que la propiedad hostDirectives aplica automáticamente directivas independientes al elemento host de un componente o una directiva, lo que permite reutilizar comportamientos mediante composición, sin plantillas ni herencia.
Preguntas frecuentes
¿La lección «La propiedad hostDirectives» es gratis?
Sí — el texto completo de «La propiedad hostDirectives» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «La propiedad hostDirectives»?
Asociar directivas al host de un componente Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «La propiedad hostDirectives»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- La propiedad hostDirectives
- Exponer inputs y outputs
- Crear comportamientos reutilizables
- Composición frente a herencia