有人可以说明使用<ng-container>
和<ng-template>
元素之间的区别吗?
我找不到NgContainer
的文档,也不太了解模板标签之间的区别。
每个代码示例都会有很大帮助。
它们都是(2.x,4.x)用于将元素组合在一起而不必引入另一个将在页面上呈现的元素(例如div
或span
)。
然而,template
需要讨厌的语法。例如,
<li *ngFor="let item of items; let i = index; trackBy: trackByFn">...</li>
会成为
<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
<li>...</li>
</template>
您可以使用ng-container
,因为它遵循您期望的并且可能已经熟悉的漂亮的*
语法。
<ng-container *ngFor="let item of items; let i = index; trackBy: trackByFn">
<li>...</li>
</ng-container>
您可以通过阅读this discussion on GitHub找到更多详细信息。
请注意,在4.x中,<template>
已弃用,并更改为<ng-template>
。
使用
<ng-container>
如果你需要一个帮助元素用于嵌套结构指令,如*ngIf
或*ngFor
,或者你想在这样的结构指令中包含多个元素;<ng-template>
,ngForTemplate
或ngTemplateOutlet
在各个地方标记的视图“片段”,请使用createEmbeddedView()
。ng-template
用于结构指令,如ng-if
,ng-for
和ng-switch
。如果您在没有结构指令的情况下使用它,则不会发生任何事情,它将呈现
当您没有合适的包装或父容器时,将使用ng-container
。在大多数情况下,我们使用div
或span
作为容器,但在这种情况下,我们想要使用多个结构指令。但是我们不能在元素上使用多个结构指令,在这种情况下,ng-container
可以用作容器
顾名思义,ng-template
表示模板。它本身并不呈现任何东西。我们可以使用ng-container
提供占位符来动态呈现模板。
ng-template
的另一个用例是我们可以使用它来将多个结构指令嵌套在一起。你可以在这篇博文中找到很好的例子:angular ng-template/ng-container
简单来说,ng-container
就像React的高级组件,它只能帮助渲染其子元素。
ng-template
基本上用于Angular的内部实现,其中ng-template
中的任何内容在渲染时都被完全忽略,它基本上成为对视图源的注释。这应该与Angular的内部指令一起使用,如ngIf
,ngSwitch
等。
ng-template显示真值。
<ng-template>
This is template block
</ng-template>
输出:
没有条件的ng-container show也显示内容。
<ng-container>
This is container.
</ng-container>
输出: 这是容器。