Projeção de conteúdo em Angular elemento com slot no Angular 7.0
Saiba mais sobre a projeção de conteúdo em um elemento Angular com slot no Angular 7.
Dhananjay Kumar
3min read
Neste artigo, aprenderemos como projetar conteúdo em um elemento Angular. A partir de agora, você sabe que usamos ng-content para realizar a projeção de conteúdo, conforme mostrado na próxima listagem:
import { Component } from '@angular/core';
@Component({
selector: 'app-greet',
template: `
<h2>{{title}}</h2>
<ng-content></ng-content>
`
})
export class GreetComponent {
title = 'Greet';
}
Você também pode projetar conteúdo conforme mostrado na próxima listagem:
<h1>Welcome to {{ title }}!</h1>
<app-greet>
<h3>Hello Foo</h3>
</app-greet>
O desafio com a abordagem acima é: "Se você usar GreetComponent como seu elemento Angular", não poderá projetar conteúdo. Para entender isso melhor, vamos começar convertendo GreetComponent em um elemento Angular. Aqui você pode aprender passo a passo para criar Angular elemento.
Depois de converter GreetComponent como Angular Element, AppModule deve se parecer com a listagem abaixo:
import { AppComponent } from './app.component';
import { GreetComponent } from './greet.component';
@NgModule({
declarations: [
AppComponent, GreetComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [GreetComponent],
entryComponents: [GreetComponent]
})
export class AppModule {
constructor(private injector: Injector) {
const customElement = createCustomElement(GreetComponent, { injector });
customElements.define('app-root', customElement);
}
ngDoBootstrap() {
}
}
Agora você pode usar o GreetComponent no index.html conforme mostrado na listagem abaixo:
<body> <!-- <app-root></app-root> --> <app-greet> <h2>hey Foo</h2> </app-greet> </body>
Ao executar o aplicativo, você descobrirá que o elemento <h2> não foi projetado para o elemento Angular GreetComponent.
A partir do Angular 7, temos outra opção para fazer o slot de projeção de conteúdo.Para fazer a projeção de conteúdo no Angular Element, você deve fazer o seguinte:
- Set ViewEnacpsulation to ShadowDom
- Use slot em vez de <ng-content>
Vamos modificar o GreetComponent conforme mostrado na lista abaixo:
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-greet',
template: `
<h2>{{title}}</h2>
<slot name='message'></slot>
`,
encapsulation: ViewEncapsulation.ShadowDom
})
export class GreetComponent {
title = 'Greet Component';
}
Definimos o encapsulamento para ShadowDom e substituímos <ng-content> por <slot>
Angular tem apoiado Shadow Dom desde o início. Até o Angular 6.0, havia três modos de encapsulamento
- Emulated
- Nativo
- Nenhum
Emulado era o modo padrão e o modo Nativo era usado para criar o Shadow Dom V.0. A partir do Angular 6.1, Angular começou a oferecer suporte ao Shadow Dom V.1. Você pode ativar o Shadow Dom V.1 em componentes usando a quarta opção ShadowDom. Se você definir o encapsulamento como ShadowDom, Angular criará o Shadow Dom V.1. Para fazer a projeção de conteúdo no Angular Element, você precisa ter o encapsulamento definido como ShadowDom.
Agora, ao executar o aplicativo, você verá que o conteúdo foi projetado conforme mostrado na imagem abaixo:
Portanto, usando o modo e o slot de encapsulamento ShadowDom, você pode projetar conteúdo em Angular elemento no Angular 7.0. Espero que você ache este post útil. Obrigado por ler. Se você gostou deste post, por favor, compartilhe-o. Além disso, se você não fez check-out Infragistics Ignite UI for Angular Componentes, certifique-se de fazê-lo! Eles têm 50+ componentes de Angular baseados em material para ajudá-lo a codificar aplicativos da web mais rapidamente.