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

问题描述 投票:0回答:3
我的 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>

然而,这对我来说感觉像是一个肮脏的黑客。还有其他可能吗?

html angular angular-ng-if ng-template
3个回答
53
投票
<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


0
投票
在这个博客中查看这个博客,非常好的解释。

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

© www.soinside.com 2019 - 2024. All rights reserved.