Simplificando a projeção de conteúdo no Angular

A projeção de conteúdo permite inserir um shadow DOM em seu componente. Simplificando, se você deseja inserir elementos HTML ou outros componentes em um componente, faça isso usando o conceito de projeção de conteúdo. No Angular, você obtém projeção de conteúdo usando < ng-content >< /ng-content >. Você pode criar componentes reutilizáveis e aplicativos escaláveis pelo uso correto da projeção de conteúdo.

Para entender a projeção de conteúdo, vamos considerar GreetComponent conforme mostrado na listagem de código abaixo:

import { Component } from '@angular/core';
 
@Component({
    selector: 'greet',
    template: `{{message}}`
})
export class GreetComponent {
 
    message: string = "Hello There !"
 
}

Agora, se você usar GreetComponent em outro componente e quiser passar uma mensagem de saudação do componente pai, deverá usar o decorador @Input(). Dessa forma, um GreetComponnet modificado será semelhante ao anúncio abaixo:

import { Component, Input } from '@angular/core';
 
@Component({
    selector: 'greet',
    template: `{{message}}`
})
export class GreetComponent {
 
    @Input() message: string;
 
}

Usando o decorador @Input(), você pode passar uma string simples para o GreetComponnet, mas e se precisar passar diferentes tipos de dados para o GreetComponent, como:

1. Inner HTML
2. HTML Elements
3. HTML estilizado
4. Outro componente etc.

Para passar ou projetar HTML ou outro componente, a projeção de conteúdo é usada. Vamos modificar o GreetComponent para usar a projeção de conteúdo neste código:

Estamos usando para projetar conteúdo no GreetComponent. Ao usar o GreetComponent, você passará o conteúdo conforme mostrado abaixo:

Na listagem acima, você está projetando HTML estilizado para o GreetComponent e obterá a seguinte saída:

Este é um exemplo de Projeção de Conteúdo de Slot Único. Tudo o que você passar para o GreetComponent será projetado. Então, vamos passar mais de um elemento HTML para o GreetComponent, conforme mostrado na listagem abaixo:

Aqui estamos passando três elementos HTML para o GreetComponent, e todos eles serão projetados. Você obterá a saída conforme mostrado na imagem abaixo:

No DOM, você pode ver que dentro do GreetComponent, todos os elementos HTML são projetados.

Projeção de vários slots

Você pode ter um requisito para projetar elementos em vários slots do componente. Neste próximo exemplo, digamos que você queira criar um cartão de felicitações como este:

Isso pode ser criado usando o componente, conforme mostrado abaixo:

Digamos que temos um requisito para passar o elemento header e um elemento btn para que o nome e o botão possam ser passados dinamicamente para o GreetComponent.  Desta vez, precisamos de dois slots:

1. Um slot para o elemento de cabeçalho
2. Um slot para o elemento btn

Vamos modificar o GreetComponent para atender ao requisito acima, conforme mostrado na imagem abaixo:

Aqui estamos usando ng-content duas vezes. Agora, a questão é se selecionamos um determinado ng-content para projetar o elemento h1 e outro ng-content para projetar um elemento btn?

Você pode selecionar um slot específico para projeção usando o seletor ng-content >.  Existem quatro tipos de seletores:

1. Projetar usando seletor de tags
2. Projetar usando o seletor de classe
3. Projeto usando seletor de id
4. Projeto usando seletor de atributo

Você pode usar o seletor de tags para projeção de vários slots, conforme mostrado na lista abaixo:

Em seguida, você pode projetar conteúdo para o GreetComponent, conforme mostrado na listagem abaixo:

Como você pode ver, estamos usando o GreetComponent duas vezes e projetando diferentes elementos h1 e button. Você obterá a saída conforme mostrado na imagem abaixo:

O problema com o uso de seletores de tag é que todos os elementos h1 serão projetados para o GreetComponent. Em muitos cenários, talvez você não queira isso e possa usar outros seletores, como um seletor de classe ou um seletor de atributo, conforme mostrado na listagem abaixo:

Em seguida, você pode projetar conteúdo para o GreetComponent, conforme mostrado na listagem abaixo:

Você obterá a mesma saída acima, no entanto, desta vez você está usando o nome da classe e o atributo para projetar o conteúdo. Ao inspecionar um elemento no DOM, você encontrará o nome do atributo e o nome da classe do elemento projetado, conforme mostrado na imagem abaixo:

A projeção de conteúdo é muito útil para inserir shadow DOM em seus componentes. Para inserir elementos HTML ou outros componentes em um componente, você precisa usar a projeção de conteúdo. No AngularJS 1.X, a projeção de conteúdo foi obtida usando Transclusão, no entanto, no Angular é obtida usando < ng-content>

No próximo post, você conhecerá conceitos mais importantes em Angular, portanto, fique atento. Além disso, não se esqueça de verificar Ignite UI para JavaScript/HTML5 e ASP.NET MVC, que você pode usar com HTML5, Angular, React e ASP.NET MVC para criar aplicativos avançados da Internet. Você pode baixar uma versão de avaliação de todos os nossos controles JavaScript gratuitamente!