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標籤之間的區別

回答

相關問題