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

【问题标题】：How to include an ng-template element without a condition in Angular 2如何在 Angular 2 中包含没有条件的 ng-template 元素
【发布时间】：2018-08-01 02:35:19
【问题描述】：

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

但是，这对我来说就像一个肮脏的黑客。还有其他可能吗？

【问题讨论】：

这不是一个肮脏的黑客，它在 Angular 文档中：angular.io/api/common/NgIf
@filipbarak 他的意思是，用 "false; else..." 来做这件事感觉像是一种肮脏的黑客行为——这是一种肮脏的黑客行为。官方答案可以在下面找到。
@PatrickKelleter 是的，这就是重点

标签： html angular angular-ng-if ng-template

【解决方案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 插入嵌入式视图。

【讨论】：

【解决方案2】：

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

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

【讨论】：