ng-transclude en Angular moderno
La transclusión pasa a ser proyección de contenido con ng-content. Los slots con nombre usan un selector CSS.
Antes · AngularJS
app.component('card', {
transclude: { title: '?cardTitle' },
template:
'<div class="card">' +
'<header ng-transclude="title"></header>' +
'<div ng-transclude></div>' +
'</div>'
});Después · Angular@Component({
selector: 'app-card',
template: `
<div class="card">
<header><ng-content select="[card-title]" /></header>
<ng-content />
</div>
`,
})
export class CardComponent {}Qué cambia
- ng-transclude pasa a ser <ng-content />.
- La transclusión multi-slot pasa a ser ng-content con el atributo select.
- El contenido por defecto va dentro del elemento ng-content (Angular 18 en adelante).
Consejo de migración. El contenido proyectado conserva el contexto del padre, igual que antes. Los componentes que leían el scope transcluido necesitan un input explícito.
Relacionado
¿Planeas una migración o una plataforma de microfrontends?
En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.
Escríbeme por LinkedIn