快捷導(dǎo)航

在Angular使用ng-container元素的操作詳解

更新時間：2024年02月20日 08:47:37 作者：白如意i

ng-container 是 Angular 2+ 中可用的一個元素,可以作為結(jié)構(gòu)指令的宿主,在本文中,您將探討可以使用 ng-container 解決的場景,文中有相關(guān)的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下

簡介

ng-container 是 Angular 2+ 中可用的一個元素，可以作為結(jié)構(gòu)指令的宿主。

在本文中，您將探討可以使用 ng-container 解決的場景。

先決條件

如果您想跟著本文學(xué)習(xí)，您需要：

熟悉 DOM 的結(jié)構(gòu)。要了解更多，請查看教程系列《理解 DOM》。
對 Angular 模板和結(jié)構(gòu)指令有一定的了解可能會有所幫助。

使用 ng-container 避免冗余元素

在 Angular 中，您不能在一個元素上使用多個模板綁定。

以下結(jié)合了 *ngIf 和 *ngFor 結(jié)構(gòu)指令的示例將無法編譯通過：

[secondary_label 無效示例]
<div *ngIf="todos" *ngFor="let todo of todos">
  {{ todo.content }}
</div>

嘗試編譯此代碼將導(dǎo)致以下錯誤：

[secondary_label 無效示例輸出]
無法在一個元素上有多個模板綁定。只能使用一個帶 * 前綴的屬性

一種解決方法是分開模板綁定并創(chuàng)建一個包裝器：

[secondary_label 有效示例]
<div *ngIf="todos">
  <div *ngFor="let todo of todos">
    {{ todo.content }}
  </div>
</div>

其中一個缺點(diǎn)是這種方法會在 DOM 中引入冗余的 div 元素：

[secondary_label 有效示例輸出]
<div>
  <div>
    待辦事項(xiàng)內(nèi)容 1
  </div>
  <div>
    待辦事項(xiàng)內(nèi)容 2
  </div>
  <div>
    待辦事項(xiàng)內(nèi)容 3
  </div>
</div>

這就是 ng-container 元素變得有用的地方。

以下示例的行為完全相同，但在運(yùn)行時不會添加任何額外的元素到 DOM 中：

[secondary_label 改進(jìn)后的有效示例]
<ng-container *ngIf="todos">
  <div *ngFor="let todo of todos">
    {{ todo.content }}
  </div>
</ng-container>

這將產(chǎn)生以下標(biāo)記：

[secondary_label 改進(jìn)后的示例輸出]
<div>
  待辦事項(xiàng)內(nèi)容 1
</div>
<div>
  待辦事項(xiàng)內(nèi)容 2
</div>
<div>
  待辦事項(xiàng)內(nèi)容 3
</div>

ng-container 在使用 ngIf 在內(nèi)聯(lián)內(nèi)容上時也很有用：

[secondary_label 示例]
<div>
  <span *ngIf="error">糟糕：</span> {{ message }}
</div>

如果 error 為真，這將產(chǎn)生以下標(biāo)記：

[secondary_label 示例輸出]
<div>
  <span>糟糕：</span> 發(fā)生了一個錯誤。
</div>

將 span 元素替換為 ng-container 將減少添加到 DOM 中的冗余 span 元素：

[secondary_label 改進(jìn)后的示例]
<div>
  <ng-container *ngIf="error">糟糕：</ng-container> {{ message }}
</div>

如果 error 為真，這將產(chǎn)生以下標(biāo)記：

[secondary_label 改進(jìn)后的示例輸出]
<div>
  糟糕：發(fā)生了一個錯誤。
</div>

減少應(yīng)用程序中的標(biāo)記量最終會導(dǎo)致更小的 DOM 樹，并有助于避免層疊樣式表選擇器的副作用。

使用 ng-container 確保有效的 HTML 標(biāo)準(zhǔn)

在使用 div 或 span 不符合有效 HTML 標(biāo)記的情況下，ng-container 也可以解決無效 HTML 標(biāo)記的問題。

以下示例將產(chǎn)生無效的 HTML，因?yàn)槠谕?nbsp;li 元素是 ul 元素的直接子元素：

[secondary_label 無效示例]
<ul>
  <div *ngFor="let todo of todos">
    <li *ngIf="todo.content !== 'Done'">
      {{ todo.content }}
    </li>
  </div>
</ul>

將 div 替換為 ng-container 可解決此問題：

[secondary_label 有效示例]
<ul>
  <ng-container *ngFor="let todo of todos">
    <li *ngIf="todo.content !== 'Done'">
      {{ todo.content }}
    </li>
  </ng-container>
</ul>

擁有有效的 HTML 將滿足更嚴(yán)格的測試和要求，并確保在各種瀏覽器和設(shè)備上的支持。