Как включить элемент ng-template без условия в Angular 2

Question

Мне нужен фрагмент HTML более одного раза в моем шаблоне Angular. Вместо того, чтобы писать код HTML несколько раз, я решил поместить его в элемент ng-template и использовать этот элемент, реплицированный в коде.

Например:

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

Как я могу теперь включить этот элемент ng-template где-нибудь в шаблоне?

Я знаю, что это возможно с помощью оператора ngIf, например, так:

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

Тем не менее, это похоже на грязный хак для меня. Есть ли другая возможность?

Answer 1

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

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

Мы определенно можем использовать ' ng-container' для создания экземпляра шаблона ' myTemplate ' на странице.

Мы ссылаемся на шаблон " myTemplate " через ссылку на шаблон #myTemplate, и мы используем структурную директиву ngTemplateOutlet для визуализации шаблона.

Директива ngTemplateOutlet вставляет встроенное представление из подготовленного TemplateRef.

Answer 2

Вы правы. Делать это с ngIf и жестко закодированным "ложным" значением - это не правильный путь. То, что вы ищете, это директива NgTemplateOutlet:

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