Angular ng-container元素的学习笔记

下面这段代码，迭代items集合元素中每一个item，当且仅当item.id不为false时，才在页面显示item.name的属性值。

如果item.id为空，最后渲染的页面里会出现空的div, 这是该解决方案的一个小缺陷。

在一个复杂的Angular应用里，div嵌套层数如果增多，会给css样式的应用带来额外的工作量。

这时我们可以选择使用ng-container而不是div，因为前者和div同样具有HTML元素容器的作用，但优于div的一点是，ng-container不会影响到styles或者页面布局(layout), 因为它根本不会出现在最终的html原生代码中。

用ng-container重写我们的代码：

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

什么时候用ng-container？

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

当需要使用多个structual指令而又不想使用额外的div元素时，可以考虑ng-container.

更多Jerry的原创文章，尽在：“汪子熙”: