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的原创文章，尽在：“汪子熙”:

Angular ng-container元素的学习笔记相关推荐

Angular 项目里 angular.json 文件内容的学习笔记
看一个基于 Angular 的 SAP Spartacus 项目里 angular.json 的例子: version: The configuration-file version. newProj ...
Angular ng-content元素的学习笔记
ng-content 的select 属性其实和 css 选择器的工作方式类似,用于帮助 Angular 找到投影内容在 DOM 中的正确放置位置. 我个人把ng-content理解成Componen ...
Angular ng-template元素的学习笔记
ng-template: As the name suggests the ng-template is a template element that Angular uses with struc ...
Angular ngTemplateOutlet 元素的学习笔记
*ngTemplateOutlet is used for two scenarios - to insert a common template in various sections of a v ...
Angular里的RouterOutlet指令学习笔记
官网:https://angular.io/api/router/RouterOutlet#description Acts as a placeholder that Angular dynamic ...
Angular 服务端渲染(SSR) 学习笔记
文章目录 1 服务器端渲染 (SSR) 2 SSR的利弊 2.1 SSR的优势 2.2 SSR的局限 3 Angular Universal 3.1 Node.js Express web serve ...
ng bootstrap css,Angular2学习笔记-ng bootstrap中motal组件使用
ng bootstrap是一个angular UI bootstrap库,里面包含了一些基本的UI组件(日期选择组件,按钮,下拉框等).目前的版本为v1.0.0-alpha.14,基于angular2 ...
4 指针运算_C++用指针访问数组元素（学习笔记：第6章 08）
用指针访问数组元素[1] 数组是一组连续存储的同类型数据,可以通过指针的算术运算,使指针依次指向数组的各个元素,进而可以遍历数组. 定义指向数组元素的指针定义与赋值例: int a[10], *p ...
cout 数组_C++用指针访问数组元素（学习笔记：第6章 08）
用指针访问数组元素[1] 数组是一组连续存储的同类型数据,可以通过指针的算术运算,使指针依次指向数组的各个元素,进而可以遍历数组. 定义指向数组元素的指针定义与赋值例: int 等效的形式经过上 ...

Angular ng-container元素的学习笔记

Angular ng-container元素的学习笔记相关推荐

最新文章

热门文章