24

我在我的 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>

然而，这对我来说就像一个肮脏的黑客。还有另一种可能吗？

4

2 回答 2

29 
  <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 插入嵌入式视图。

于 2018-09-21T12:35:24.890 回答
1

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

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

于 2018-02-21T13:39:45.847 回答