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

Question

我的 Angular 模板中多次需要 HTML 片段。我决定将其放入

ng-template 元素中并使用在代码中复制的该元素，而不是多次编写 HTML 代码。

例如：

<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 和硬编码的“false”值来执行此操作并不是此处的正确方法。您正在寻找的是 NgTemplateOutlet 指令：

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

Answer 3

在这个博客中查看这个博客，非常好的解释。

https://www.codingfunda.co.in/2023/06/how-to-get-and-use-ng-template-ng.html