Angular 6 multiple ng-content
Este post trata de múltiplas transclusões e slots nomeados que estão disponíveis em Angular para tratar múltiplos conteúdos usando
Última atualização em: | 14438 Visualizações
Para iniciar o entendimento, transclusão é a inclusão de conteúdo de um documento em outro documento através de referência. No Angular é possível fazer múltiplas transclusões usando slots nomeados. Parece complicado mas na prática é muito simples.
Basicamente, o que faz é permitir que você especifique várias regiões dentro do modelo do seu componente, que podem ser fornecidas pelo usuário do componente. Este é um grande recurso que foi adicionado ao Angular 1.5.
Para entender melhor, vamos a um exemplo. Considere o componente TitleComponent
que recebe um título e um sub-título.
//our root app component
import {Component} from '@angular/core'
@Component({
selector: 'app-title',
template: `
<h1>
<ng-content select="[principal]"></ng-content>
</h1>
<h3>
<ng-content select="[auxiliar]"></ng-content>
</h3>
<p>Este é um exemplo de múltiplas transclusões com slots nomeados</p>
`
})
export class TitleComponent {}
Note que se utilizar apenas o
<ng-content>
sozinho, não é necessário usar o recurso de múltiplas projeções de conteúdo. Caso contrário, é necessário usar a propriedade select, veja:
[...]
<ng-content select="[auxiliar]"></ng-content>
[...]
E para usar o componente app-title
, faça:
<app-title>
<div principal>Este é o título que vai para o H1</div>
<div auxiliar>Este é o título auxiliar que vai para o H3</div>
</app-title>
Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.