如何在 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

你是对的。使用 ngIf 和硬编码的 "false" 值来执行此操作并不是正确的方法。您正在寻找的是 NgTemplateOutlet 指令：

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

Answer 2

  <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 中插入一个嵌入式视图。

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

How to include an ng-template element without a condition in Angular 2

html

angular

angular-ng-if

ng-template