Proyección de contenido en un único slot
Proyectar contenido con ng-content
Proyección de contenido en un único slot 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.
¿Qué es la proyección de contenido?
La proyección de contenido permite que un componente reciba marcado de su componente padre y lo renderice dentro de su propia plantilla. Es el equivalente de Angular a los «slots» de los componentes web.
El componente padre escribe el contenido entre las etiquetas del componente, y el componente decide dónde aparece dicho contenido.
Por qué la necesita
Los contenedores reutilizables, como tarjetas, diálogos y paneles, no conocen de antemano su contenido. La proyección de contenido los convierte en contenedores flexibles.
- Construya una tarjeta una sola vez y rellénela con cualquier contenido
- Mantenga la lógica de diseño en el componente
- Mantenga el contenido en el consumidor
El elemento ng-content
El elemento <ng-content> marca el lugar donde se coloca el contenido proyectado. Una configuración de ranura única usa exactamente un <ng-content> sin el atributo select.
@Component({
selector: 'app-card',
template: '<div class="card"><ng-content></ng-content></div>'
})
export class CardComponent {}Usar el componente
Todo lo que el componente padre coloque entre las etiquetas del componente se proyecta en la ranura.
<app-card>
<h2>Hello</h2>
<p>This text is projected into the card.</p>
</app-card>Una ranura = una salida
Con una única ranura sin nombre, todos los nodos proyectados van al único <ng-content>. No hay filtrado; el orden se conserva exactamente como lo escribió el componente padre.
Contenido predeterminado
Puede colocar marcado alternativo dentro de <ng-content>. Las versiones modernas de Angular renderizan este contenido predeterminado solo cuando el consumidor no proyecta nada en esa ranura.
<div class="card">
<ng-content>No content provided.</ng-content>
</div>Aplicar estilos al contenido proyectado
El contenido proyectado pertenece a la vista del componente padre, por lo que se le aplican los estilos del padre, no los de la tarjeta. Para acceder a los nodos proyectados desde la tarjeta, use ::ng-deep con moderación o recurra a estilos globales.
Contenido frente a vista
Angular distingue entre hijos de contenido (proyectados) e hijos de vista (declarados en la plantilla). Esto es importante para consultas como contentChild frente a viewChild.
icon = contentChild(IconComponent);Ciclo de vida: ngAfterContentInit
El contenido proyectado está disponible después de que se ejecuta ngAfterContentInit(). Use este método (o ngAfterContentChecked) para leer de forma segura los hijos de contenido.
ngAfterContentInit() {
console.log('Projected content ready');
}Un ejemplo real de panel
A continuación se muestra un panel reutilizable completo. El consumidor controla por completo el interior; el panel controla la estructura exterior.
@Component({
selector: 'app-panel',
template: '<section class="panel"><ng-content></ng-content></section>',
styles: ['.panel { border: 1px solid #ccc; padding: 16px; }']
})
export class PanelComponent {}Error común
Colocar dos veces el mismo <ng-content> sin nombre no duplica el contenido. Angular solo proyecta en la última ranura coincidente. Use proyección en varias ranuras si necesita varias regiones.
Comprobación rápida
Compruebe su comprensión de la proyección en una sola ranura.
Resumen
Ha aprendido que la proyección de contenido usa <ng-content> para renderizar marcado proporcionado por el componente padre dentro de un componente. La proyección en una sola ranura usa una única salida sin nombre, el contenido proyectado pertenece a la vista del padre y está disponible en ngAfterContentInit.
Preguntas frecuentes
¿La lección «Proyección de contenido en un único slot» es gratis?
Sí — el texto completo de «Proyección de contenido en un único slot» 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 «Proyección de contenido en un único slot»?
Proyectar contenido con ng-content 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 «Proyección de contenido en un único slot»?
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
- Proyección de contenido en un único slot
- Proyección en varios slots con select
- ng-template y ng-container
- TemplateRef y ViewContainerRef