Header Ads Widget

Ticker

6/recent/ticker-posts

Proyección de contenido en Angular 10/9: pasar datos de un componente principal a una plantilla secundaria con contenido Ng

 La proyección de contenido es un concepto que ayuda a los desarrolladores a crear componentes angulares reutilizables Le permite pasar datos de un componente principal a una plantilla de un componente secundario. Es similar a la transclusión en Angular.js

Proyección de contenido con ejemplo de Angular 10

Veamos ahora con un ejemplo simple de Angular 10 cómo podemos proyectar contenido desde un componente padre a su hijo.

Usaremos Stackblitz para crear nuestro ejemplo de proyecto de contenido.

Puede consultar nuestro ejemplo desde este enlace .

En Stackblitz, ya tenemos un proyecto generado con un par de componentes AppComponentHelloComponent.

El componente hello toma una propiedad de entrada llamada namey muestra el siguiente contenido:

<h1>Hello !</h1>

En src/app/app.component.htmlesto incluimos el componente hello usando su selector:

<hello  name=""></hello>

Este es el código completo del componente hello:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>Hello !</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;
}

Como puedes ver. Usando el @Inputdecorador podemos pasar datos a nuestro componente desde el exterior.

Leer más sobre los decoradores Angular TypeScript .

Ahora, ¿qué pasa si nuestros datos son más complejos que solo un nombre? Digamos que necesitamos pasar algo de contenido HTML a nuestro componente. Esto se puede hacer con @Inputpero es muy eficiente y escalable y puede ser propenso a errores.

Aquí viene la proyección de contenido <ng-content>.

Implementando contenido proyectado en Angular 10

Modifiquemos nuestro componente de saludo para aceptar contenido proyectado desde el exterior.

Primero, necesitamos usarlo <ng-content>en nuestra plantilla de componente angular. Aquí es donde se proyectarán los datos pasados:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<ng-content></ng-content>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
}

Ahora, en el src/app/app.component.htmlarchivo, pasamos el contenido HTML a nuestro componente de saludo de la siguiente manera:

<hello>
    <h1>Hello Angular!</h1>
</hello>

Pasamos el <h1>Hello Angular!</h1>código al componente hello para renderizarlo.

Podemos controlar lo que se puede pasar al componente usando selectin ng-content.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<ng-content select="h1"></ng-content>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
}

Esto significa que solo <h1>se pasarán y procesarán etiquetas. Por ejemplo, si ahora pasa el siguiente contenido al componente hello, no se pasará:

<hello>
    <h2>Hello Angular 10!</h2>
</hello>

También puede usar la sintaxis [attr] en la propiedad select para aceptar solo elementos que tengan un atributo específico:

<ng-content select="[title]"></ng-content>

Ahora, para renderizar el contenido, debe realizar el siguiente cambio:

<hello>
  <h1 title>Hello Angular 9!</h1>
</hello>

Conclusión

Como resumen, hemos visto cómo proyectar contenido en Angular 10/9 usando lo ng-contentque le ayuda a construir componentes reutilizables.


Publicar un comentario

0 Comentarios