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

有人可以说明使用<ng-container>和<ng-template>元素之间的区别吗？ng2 - ng-container和ng-template标签之间的区别

我找不到NgContainer的文档，不太了解模板标签之间的区别。

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

2016-11-10 parliament

它们都是（2.x，4.x）用于将元素分组在一起，而不必引入将在页面上呈现的另一个元素（如div或）。

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()在各个位置加戳的视图“代码段”。

来源

2016-11-10 14:39:31

“令人讨厌的语法”可能有点夸张：D这是将值传递给'@Input（）'的正常语法。 '*'当然更方便。但是你是对的，因为语法差异造成了一些混淆，所以引入了。 –

不会在DOM中引入新元素。那呢？请在你的回答中澄清。 –

这个页面帮助我弄清楚什么是：https：//blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/。 – Mikser

我用<mat-option>里面坐了2个标签在自定义列表行组件

我通过<ng-template>没有把它包出现

但是，当我在<ng-container>包裹它表现出来的。

来源

2018-03-07 14:23:21 amorenew

ng-template用于ng-if，ng-for和ng-switch等结构指令。如果你在没有结构指示的情况下使用它，没有任何反应和呈现。

当您没有合适的包装或父容器时，使用ng-container。在大多数情况下，我们使用div或span作为容器，但在这种情况下，如果您想使用多个结构指令，但不能在元素上使用多个结构指令，那么可以使用ng-container作为容器

来源

2018-03-09 20:23:23 Kansara

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

回答

相关问题