使用，通过as语法定义
例如 index as $index
我们此时可以使用$index了
这些循环变量是临时的，一旦循环结束，这些变量就被销毁了，所以我们就无法访问。
ngFor指令控制多个兄弟元素，我们也可以使用ng-template组件，但是语法变量
通过ngFor声明循环指令
通过ngForOf绑定循环数据
通过let-item定义成员值
| 1 <!-- 循环成员 --> 2 <ul> 3 <!-- <li *ngFor="let item of colors; index as index; first as $first" [style.background]="item">{{index}}-{{item}}-{{$first}}</li> --> 4 <!-- 斑马线 --> 5 <li *ngFor="let item of colors; index as index; first as $first; last as $last; even as e; odd as o" [style.background]="e ? '#eee' : ''" >{{index}}-{{item}}-{{$first}}-{{$last}}-{{e}}-{{o}}</li> 6 </ul> 7 <h1>循环外部{{index}}</h1> 8 <ng-template ngFor [ngForOf]="colors" let-item> 9 <h1>h1 {{item}}</h1> 10 <h2>h2 {{item}}</h2> 11 </ng-template> |
1.11自定义指令
在ng6中有三类指令
第一类就是组件（组件的本质也是指令）
第二类是属性型指令，例如ngStyle， ngClass
控制元素行为样式的
ngClass跟vue中的:class类似
属性值可以是字符串
属性值可以是对象
属性值可以是数组
第三类是结构型指令，例如：ngFor， ngIf, ngSwitchCase, ngSwitchDefault...
就是模板指令，控制元素创建的
结构型指令与属性型指令的区别
属性型指令控制样式行为，不能控制元素是否创建，而结构型指令则控制元素是否创建
虽然所有指令的属性值默认都是字符串，但是要变成js环境，应用的语法糖是不同的
属性型指令使用[]语法糖
结构型指令对于普通元素使用*语法糖，对于ng-template组件使用[]语法糖
内置的指令是有限的，为了提供更多的功能，我们要自定义指令
1.11.1自定义指令
我们通过ng指令来创建
ng g directive demo
此时创建了两个文件，并且修改了全局模块配置文件
自定义指令在全局声明了。因此我们可以在任何位置直接使用该指令
指令与组件的区别
1 文件
组件有四类文件：.html, .css, .ts, .spec.ts,
指令只有.ts, .spec.ts文件，没有模板和样式
2 选择器
组件的默认选择器是自定义元素名称选择器
指令的默认选择器是自定义属性选择器
3 注解
组件的组件类是Component，可以注入样式和模板
指令的注解类是Directive
4 接口
组件实现了OnInit接口
指令没有实现OnInit接口
组件终归是指令，指令更是指令了
组件可以实现通信，指令也可以实现通信