Crear comportamientos reutilizables
Empaquetar comportamientos como directivas componibles
Crear comportamientos reutilizables es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 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.
Los comportamientos como bloques de construcción
La API de composición resulta especialmente útil al diseñar directivas pequeñas y especializadas, cada una de las cuales encapsula un comportamiento, para luego componerlas en los componentes según sea necesario.
Una directiva de propósito único
Mantenga cada comportamiento pequeño y autónomo.
@Directive({
selector: '[appElevate]'
})
export class ElevateDirective {
@HostBinding('style.boxShadow')
shadow = '0 2px 8px rgba(0,0,0,.15)';
}Un comportamiento de hover
Otro comportamiento escucha el hover y alterna una clase.
@Directive({ selector: '[appHoverClass]' })
export class HoverClassDirective {
@HostBinding('class.is-hover') hovering = false;
@HostListener('mouseenter') on() { this.hovering = true; }
@HostListener('mouseleave') off() { this.hovering = false; }
}Componer comportamientos
Un componente de tarjeta compone ambos comportamientos sin configuración en la plantilla.
@Component({
selector: 'app-card',
hostDirectives: [ElevateDirective, HoverClassDirective],
template: '<ng-content></ng-content>'
})
export class CardComponent {}Reutilización entre componentes
Los mismos comportamientos se pueden componer en botones, mosaicos o paneles. Defínalos una vez y reutilícelos en todas partes, sin duplicación.
Comportamientos configurables
Añada inputs para que un comportamiento se pueda ajustar y, después, expóngalos donde se componga.
@Directive({ selector: '[appElevate]' })
export class ElevateDirective {
level = input(1);
}Exponer el control
Exponga el input configurable para que cada host pueda establecerlo.
hostDirectives: [{
directive: ElevateDirective,
inputs: ['level']
}]Coordinar comportamientos
Los comportamientos pueden inyectarse entre sí mediante el inyector del elemento para coordinarse; por ejemplo, un ripple puede reaccionar a un estado de pulsación.
Facilidad de prueba
Los comportamientos pequeños son fáciles de probar mediante pruebas unitarias de forma aislada y, después, se pueden usar con confianza al componerlos, lo que mejora la fiabilidad general.
Convenciones de nomenclatura
Asigne a los comportamientos nombres basados en lo que hacen (appElevate, appHoverClass, appAutofocus). Los nombres claros hacen que la composición se documente por sí misma.
Una biblioteca de comportamientos
Con el tiempo, creará una biblioteca de comportamientos componibles a los que cualquier componente podrá optar, reduciendo considerablemente la lógica repetida del host.
Comprobación rápida
Compruebe su comprensión de los comportamientos reutilizables.
Resumen
Ha aprendido a diseñar directivas pequeñas y autónomas, cada una de las cuales encapsula un comportamiento; a componerlas con hostDirectives; a exponer inputs ajustables; y a crear una biblioteca de comportamientos reutilizable y fácil de probar.
Preguntas frecuentes
¿La lección «Crear comportamientos reutilizables» es gratis?
Sí — el texto completo de «Crear comportamientos reutilizables» 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 «Crear comportamientos reutilizables»?
Empaquetar comportamientos como directivas componibles 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 3 de 4.
¿Cuánto tiempo toma la lección «Crear comportamientos reutilizables»?
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