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

时间:2018-02-21 13:25:26

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

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

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

2 个答案:

答案 0 :(得分:7)

if find in birthdays:
    date = birthdays.get(find)
    print(" %s 's birthday is at %s" % (find, date))

我们绝对可以使用“ ng-container” 在页面上实例化“ myTemplate ”模板。

我们通过其模板引用#myTemplate引用“ myTemplate ”模板,并且我们正在使用ngTemplateOutlet结构指令来呈现该模板。

ngTemplateOutlet 指令从准备好的TemplateRef中插入嵌入式视图。

答案 1 :(得分:1)

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

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