天天看点

2020国庆节 Angular structual 指令学习笔记(<ng-template>) 包含语法糖解糖过程

2020国庆节 Angular structual 指令学习笔记(<ng-template>) 包含语法糖解糖过程

NgIf是结构化指令的实现class,ngif是指令的属性名,应用在HTML代码里。

除了structural指令外,Angular常用的还有Component指令和属性指令两种。

A component manages a region of HTML in the manner of a native HTML element. Technically it’s a directive with a template.

An attribute directive changes the appearance or behavior of an element, component, or another directive. For example, the built-in NgStyle directive changes several element styles at the same time.

2020国庆节 Angular structual 指令学习笔记(<ng-template>) 包含语法糖解糖过程

structural指令和host元素是1:1关系,attribute指令和host元素可以是N:1关系。

NgIf takes a boolean expression and makes an entire chunk of the DOM appear or disappear.

2020国庆节 Angular structual 指令学习笔记(<ng-template>) 包含语法糖解糖过程
2020国庆节 Angular structual 指令学习笔记(<ng-template>) 包含语法糖解糖过程
2020国庆节 Angular structual 指令学习笔记(<ng-template>) 包含语法糖解糖过程

使用微语法(一个字符串)配置结构性指令。微语法解析器把这个字符串里的内容解析成的属性:

The parser translates let hero, let i, and let odd into variables named let-hero, let-i, and let-odd.

As the NgFor directive loops through the list, it sets and resets properties of its own context object. These properties can include, but aren’t limited to, index, odd, and a special property named $implicit.

NgFor遍历list,在每次循环过程体内部设置它自己上下文对象的属性,比如index,odd和$implicit.

Template input variable

A template input variable is a variable whose value you can reference within a single instance of the template. 可以在模板的某一个具体实例内被使用。

2020国庆节 Angular structual 指令学习笔记(<ng-template>) 包含语法糖解糖过程

里面包含的元素不会出现在最后的HTML页面里:

2020国庆节 Angular structual 指令学习笔记(<ng-template>) 包含语法糖解糖过程
2020国庆节 Angular structual 指令学习笔记(<ng-template>) 包含语法糖解糖过程
2020国庆节 Angular structual 指令学习笔记(<ng-template>) 包含语法糖解糖过程

还有一种情况,某些html元素要求其子元素必须是一种特殊的类型,比如的子元素必须是, 二者中间不能再引入或者等中间层级。像下图这种设计,最后是看不到下拉菜单的:是一种grouping element,不会干预HTML正常的布局和样式,因为Angular不会将其渲染到最终的HTML中去。

继续阅读