Proyección en varios slots con select
Proyectar contenido en slots con nombre
Proyección en varios slots con select 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.
Varias ranuras
Muchos componentes necesitan varias regiones: un encabezado, un cuerpo y un pie. Angular lo admite mediante la proyección en varias ranuras, usando el atributo select en <ng-content>.
El atributo select
select acepta un selector CSS. Cada <ng-content select="..."> solo proyecta los nodos que coinciden con ese selector.
<ng-content select="[card-header]"></ng-content>
<ng-content select="[card-body]"></ng-content>Seleccionar por atributo
Los selectores de atributos son el patrón más habitual porque se leen claramente en el marcado del consumidor.
@Component({
selector: 'app-card',
template:
'<header><ng-content select="[header]"></ng-content></header>' +
'<main><ng-content select="[body]"></ng-content></main>'
})
export class CardComponent {}Consumir ranuras con nombre
El consumidor etiqueta cada fragmento de contenido con el atributo correspondiente.
<app-card>
<h2 header>Title</h2>
<p body>Some body text here.</p>
</app-card>Seleccionar por elemento o clase
También puede seleccionar por nombre de elemento o por clase CSS.
<ng-content select="card-title"></ng-content>
<ng-content select=".highlight"></ng-content>La ranura comodín
Un <ng-content> sin select captura todo lo que no coincidió con una ranura con nombre. Colóquelo al final como alternativa.
<ng-content select="[header]"></ng-content>
<ng-content></ng-content>El orden importa
Angular evalúa las ranuras en el orden de la plantilla. Cada nodo proyectado va a la primera ranura coincidente. Coloque la ranura comodín después de los selectores específicos para que no capture todo.
Combinar selectores
Los selectores CSS se pueden combinar; por ejemplo, select="button[primary]" selecciona un elemento de botón con un atributo primary.
<ng-content select="button[primary]"></ng-content>Un componente de diseño
A continuación se muestra una tarjeta con ranuras para el encabezado, el cuerpo y el pie, además de una ranura comodín.
@Component({
selector: 'app-card',
template:
'<header><ng-content select="[header]"></ng-content></header>' +
'<section><ng-content></ng-content></section>' +
'<footer><ng-content select="[footer]"></ng-content></footer>'
})
export class CardComponent {}Cada nodo se proyecta una vez
Un nodo proyectado determinado solo coincide con una ranura y se renderiza exactamente una vez. No es posible clonar el mismo nodo en dos ranuras mediante la proyección.
Aplicar estilos por ranura
Como cada ranura se encuentra en una ubicación distinta del DOM, puede envolver las ranuras en contenedores con estilos (encabezado/pie) para dar a cada región su propio aspecto.
Comprobación rápida
Compruebe sus conocimientos sobre la proyección en varias ranuras.
Resumen
Ha aprendido a crear componentes de varias ranuras con <ng-content select="...">. Los selectores pueden dirigirse a atributos, elementos o clases; una ranura sin selector funciona como comodín; y el orden determina qué ranura tiene prioridad.
Preguntas frecuentes
¿La lección «Proyección en varios slots con select» es gratis?
Sí — el texto completo de «Proyección en varios slots con select» 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 en varios slots con select»?
Proyectar contenido en slots con nombre 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 «Proyección en varios slots con select»?
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