Cómo incluir un elemento ng-template sin una condición en Angular 2

2 minutos de lectura

Necesito un fragmento HTML más de una vez en mi plantilla Angular. En lugar de escribir el código HTML varias veces, decidí ponerlo dentro de un plantilla ng y use ese elemento replicado en el código.

Por ejemplo:

<ng-template #myTemplate>
  <h1>Some Header</h1>
  <p>Some text...</p>
</ng-template>

¿Cómo puedo ahora incluir esto? plantilla ng elemento en algún lugar de la plantilla?

Sé que esto es posible mediante el uso de un ngSi declaración, así:

<div *ngIf="false; else myTemplate"></div>

Sin embargo, esto me parece un truco sucio. ¿Hay otra posibilidad?

  • No es un truco sucio, está en la documentación de Angular: angular.io/api/common/NgIf

    – filipbarak

    21 de febrero de 2018 a las 13:31


  • @filipbarak lo que quiere decir es que se siente como un truco sucio hacerlo con “falso; si no…”, y eso ES un truco sucio. la respuesta oficial se puede encontrar a continuación.

    – Patrick Kelleter

    21 de febrero de 2018 a las 13:40


  • @PatrickKelleter sí, ese es el punto

    – usuario7346048

    21 de febrero de 2018 a las 13:42

  <ng-template #myTemplate>
      <h1>Some Header</h1>
      <p>Some text...</p>
  </ng-template>

  <ng-container *ngTemplateOutlet="myTemplate">
  </ng-container>

Definitivamente podemos usar ‘ng-contenedor’ para instanciar el ‘miPlantilla‘ plantilla en la página.

Nos referimos al ‘miPlantilla‘ a través de su referencia de plantilla #myTemplate, y estamos usando la directiva estructural ngTemplateOutlet para representar la plantilla.

ngTemplateOutlet directiva inserta una vista incrustada de un TemplateRef preparado.

Tienes razón. Hacerlo con un ngIf y un valor “falso” codificado no es el camino correcto aquí. Lo que está buscando es la directiva NgTemplateOutlet:

https://angular.io/api/common/NgTemplateOutlet

¿Ha sido útil esta solución?