Exponer inputs y outputs
Exponer los inputs y outputs de las directivas del host
Exponer inputs y outputs es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 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.
Exponer API compuestas
Al componer una directiva mediante hostDirectives, sus entradas y salidas están ocultas de forma predeterminada. La API de composición permite exponer entradas y salidas seleccionadas en la API pública del host.
La forma de objeto
En lugar de indicar solo la clase, use un objeto con arrays directive, inputs y outputs.
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText'],
outputs: ['tooltipShown']
}]Exponer un input
Incluir el nombre de un input en inputs permite que los consumidores lo enlacen en el elemento host.
<app-button tooltipText="Save changes"></app-button>Exponer un output
Incluir un output hace que el host vuelva a emitir los eventos de esa directiva.
<app-button (tooltipShown)="onShown()"></app-button>Renombrar al exponer
Use la forma publicName: internalName para renombrar un input o output al exponerlo.
inputs: ['tooltipText: hint']
// consumers bind [hint]="..."Renombrar outputs
Los outputs se renombran de la misma manera.
outputs: ['tooltipShown: shown']
// template: (shown)="..."¿Por qué ocultar de forma predeterminada?
Ocultar los inputs y outputs compuestos mantiene intencional la API del host. Exponga solo lo que tenga sentido para los consumidores y evite filtrar detalles internos de las directivas.
Combinar con inputs propios
El host puede tener sus propios inputs además de los expuestos; Angular los combina en una única API pública del elemento.
@Component({
selector: 'app-button',
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText']
}]
})
export class ButtonComponent {
label = input('');
}Colisiones de nombres
Si el nombre de un input expuesto coincide con el de un input propio del host, renombrarlo evita el conflicto y aclara la intención.
Enlaces bidireccionales
Para admitir un enlace bidireccional mediante composición, exponga tanto el input como su output Change correspondiente, usando nombres coherentes.
Práctica recomendada
Exponga la superficie mínima y con nombres claros que necesiten los consumidores. Renombre los nombres internos para adaptarlos al vocabulario de su componente, no al de la directiva subyacente.
Comprobación rápida
Compruebe su comprensión de la exposición de inputs y outputs.
Resumen
Ha aprendido que la forma de objeto de hostDirectives expone determinados inputs y outputs en la API del host, con el renombrado opcional publicName: internalName, manteniendo intencional la superficie pública.
Preguntas frecuentes
¿La lección «Exponer inputs y outputs» es gratis?
Sí — el texto completo de «Exponer inputs y outputs» 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 «Exponer inputs y outputs»?
Exponer los inputs y outputs de las directivas del host 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 2 de 4.
¿Cuánto tiempo toma la lección «Exponer inputs y outputs»?
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