下面這段代碼，迭代items集合元素中每一個(gè)item，當(dāng)且僅當(dāng)item.id不為false時(shí)，才在頁(yè)面顯示item.name的屬性值。

如果item.id為空，最后渲染的頁(yè)面里會(huì)出現(xiàn)空的div, 這是該解決方案的一個(gè)小缺陷。

在一個(gè)復(fù)雜的Angular應(yīng)用里，div嵌套層數(shù)如果增多，會(huì)給css樣式的應(yīng)用帶來(lái)額外的工作量。

這時(shí)我們可以選擇使用ng-container而不是div，因?yàn)榍罢吆蚫iv同樣具有HTML元素容器的作用，但優(yōu)于div的一點(diǎn)是，ng-container不會(huì)影響到styles或者頁(yè)面布局(layout), 因?yàn)樗静粫?huì)出現(xiàn)在最終的html原生代碼中。

用ng-container重寫我們的代碼：

最后生成的HTML代碼里，不再有多余的empty div了：

什么時(shí)候用ng-container？

We should use when we just want to apply multiple structural directives without introducing any extra element in our DOM.

當(dāng)需要使用多個(gè)structual指令而又不想使用額外的div元素時(shí)，可以考慮ng-container.

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的Angular ng-container元素的学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。