快捷導(dǎo)航

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

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

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

簡(jiǎn)介

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

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

先決條件

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

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

使用 ng-container 避免冗余元素

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

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

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

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

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

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

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

其中一個(gè)缺點(diǎn)是這種方法會(huì)在 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)行時(shí)不會(huì)添加任何額外的元素到 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)容上時(shí)也很有用：

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

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

[secondary_label 示例輸出]
<div>
  <span>糟糕：</span> 發(fā)生了一個(gè)錯(cuò)誤。
</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ā)生了一個(gè)錯(cuò)誤。
</div>

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

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

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

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

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

將 div 替換為 ng-container 可解決此問(wèn)題：

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

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