Proyección de contenido en Angular elemento con ranura en Angular 7.0
Más información sobre la proyección de contenido en un elemento Angular con ranura en Angular 7.
Dhananjay Kumar
3min read
En este artículo, aprenderemos cómo proyectar contenido en un elemento Angular. A partir de ahora, ya sabes que utilizamos ng-content para llevar a cabo la proyección de contenidos como se muestra en el siguiente listado:
import { Component } from '@angular/core';
@Component({
selector: 'app-greet',
template: `
<h2>{{title}}</h2>
<ng-content></ng-content>
`
})
export class GreetComponent {
title = 'Greet';
}
También puede proyectar contenido como se muestra en la siguiente lista:
<h1>Welcome to {{ title }}!</h1>
<app-greet>
<h3>Hello Foo</h3>
</app-greet>
El desafío con el enfoque anterior es: "Si usa GreetComponent como su elemento Angular", no podrá proyectar contenido. Para comprender esto mejor, comencemos con la conversión de GreetComponent en un elemento Angular. Aquí puedes aprender paso a paso a crear Angular elemento.
Después de convertir GreetComponent como Angular Element, AppModule debería tener un aspecto similar al de la lista siguiente:
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() {
}
}
Ahora puede usar GreetComponent en index.html como se muestra en la lista a continuación:
<body> <!-- <app-root></app-root> --> <app-greet> <h2>hey Foo</h2> </app-greet> </body>
Al ejecutar la aplicación, encontrará que el elemento <h2> no se ha proyectado en el elemento Angular GreetComponent.
A partir del Angular 7, tenemos otra opción para hacer la ranura de proyección de contenido.Para hacer proyección de contenido en Angular Element, tienes que hacer lo siguiente:
- Set ViewEnacpsulation to ShadowDom
- Usa slot en lugar de contenido <ng>
Modifiquemos GreetComponent como se muestra en la lista a continuación:
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';
}
Hemos establecido la encapsulación en ShadowDom y hemos reemplazado <ng-content> con <slot>
Angular ha estado apoyando a Shadow Dom desde el principio. Hasta Angular 6.0, había tres modos de encapsulación
- Emulated
- Nativo
- Ninguno
Emulado era el modo predeterminado y el modo nativo se usó para crear Shadow Dom V.0. A partir de Angular 6.1, Angular comenzó a admitir Shadow Dom V.1. Puede habilitar Shadow Dom V.1 en los componentes utilizando la cuarta opción ShadowDom. Si establece la encapsulación en ShadowDom, Angular crea Shadow Dom V.1. Para realizar la proyección de contenido en Angular Element, debe tener la encapsulación establecida en ShadowDom.
Ahora, al ejecutar la aplicación, encontrará que el contenido se ha proyectado como se muestra en la imagen a continuación:
Por lo tanto, al usar el modo de encapsulación y la ranura de ShadowDom, puede proyectar contenido en Angular Element en Angular 7.0. Espero que encuentres útil esta publicación. Gracias por leer. Si te gusta esta publicación, compártela. Además, si no ha revisado Infragistics Ignite UI for Angular Componentes, ¡asegúrese de hacerlo! Tienen 50+ componentes de Angular basados en materiales para ayudarlo a codificar aplicaciones web más rápido.