ng2 - ng-container 和 ng-template 标签之间的区别

2024-02-16

有人可以说明一下使用之间的区别吗<ng-container> and <ng-template>元素?

我找不到相关文档NgContainer不太明白模板标签之间的区别。

每个代码示例都会有很大帮助。


目前,它们(2.x,4.x)都用于将元素分组在一起,而无需引入将在页面上呈现的另一个元素(例如div or 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>

您可以通过阅读了解更多详细信息GitHub 上的讨论 https://github.com/angular/angular/issues/11994.


请注意,在 4.x 中<template>已弃用并更改为<ng-template>.


Use

  • <ng-container> https://angular.io/guide/structural-directives#ngcontainer如果您需要嵌套结构指令的辅助元素,例如*ngIf https://angular.io/api/common/NgIf or *ngFor https://angular.io/api/common/NgForOf或者如果您想在这样的结构指令中包装多个元素;
  • <ng-template>如果您需要一个要在不同位置标记的视图“片段”,请使用ngForTemplate, ngTemplateOutlet https://angular.io/api/common/NgTemplateOutlet, or createEmbeddedView() https://angular.io/api/core/ViewContainerRef#createEmbeddedView.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ng2 - ng-container 和 ng-template 标签之间的区别 的相关文章

随机推荐