如何在Angular 2中包含无条件的ng-template元素

Question

我的Angular模板中需要HTML片段不止一次。我决定不将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实例化页面上的my模板。

我们通过其模板引用#myTemplate来引用“ myTemplate ”模板，并且我们使用ngTemplateOutlet结构指令来呈现该模板。

ngTemplateOutlet 指令从准备的TemplateRef中插入一个嵌入式视图。