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>
然而,这对我来说感觉像是一个肮脏的黑客。还有其他可能吗?
<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插入嵌入视图。