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

Wolmir Cezer Garbin por Wolmir Cezer Garbin - - Angular - TUTORIAL

Ú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.


Publique seu post no Receitas de Código

Aguarde, estamos trabalhando para que você possa publicar sua postagem no Receitas de Código!