小知识，大挑战！本文正在参与“程序员必备小知识”创作活动
模板指令
指令是对DOM的拓展，为元素提供更多的功能。
在ng6中，只能要使用驼峰式命名，并且属性值是字符串， 例如 ngStyle=””
让指令的属性值变成js环境，我们要使用[]语法糖
为了控制元素的创建，ng6提供了一组模板指令
一个指令只能控制一个元素，想控制多个元素，我们要使用模板组件
模板组件
在vue中，通过template定义模板组件
在ng6中，通过ng-template定义模板组件
是一个模板组件，默认不会渲染出来，但是可以像元素一样，添加属性等等
在ng6中模板组件跟普通的元素不同的，在使用模板指令的时候语法不一样
普通的元素，使用模板指令，要使用*语法糖
ng-template模板组件，使用模板指令，要使用[]语法糖
条件模板指令
在vue中，通过v-if定义条件模板指令
在ng6中，通过ngIf定义条件模板指令
对普通元素使用，要使用*语法糖。
对模板组件使用，要使用[]语法糖
使用语法糖后，属性值是js环境
值为true要创建该元素
值为false要删除该元素。
多分支条件模板指令
在vue中，通过v-if，v-else-if，v-else等指令定义多分支条件模板指令
在ng6中，通过模拟js中switch语句实现的
js中定义switch语句
swtich () {
case:;
case:;
default:;
}
ng6提供了ngSwitch，ngSwitchCase，ngSwitchDefault指令，实现多分支条件模板指令
通过ngSwitch定义条件，没有控制元素创建，所以要使用[]语法糖
ngSwitchCase与ngSwitchDefault要控制元素的创建，因此要使用*语法糖
ngSwitchCase的属性值是条件值，是js环境，字符串要加引号
ngSwitchDefault不需要设置属性值
举例：
<!-- 普通元素使用*语法糖 -->
<h1 *ngIf="isShow">template works!</h1>
<!-- 控制多个元素 -->
<ng-template [ngIf]="isShow">
<h1>学习</h1>
<h2>菜鸟学习</h2>
</ng-template>
<!-- 选项卡 -->
<button (click)="togglePage('home')">home</button>
<button (click)="togglePage('list')">list</button>
<button (click)="togglePage('detail')">detail</button>
<!-- 定义三个页面 -->
<div [ngSwitch]="page">
<!-- 定义条件 -->
<h1 *ngSwitchCase="'home'">home page</h1>
<h1 *ngSwitchCase="abc">list page</h1>
<!-- 默认的 -->
<h1 *ngSwitchDefault>detail page</h1>
</div>
<h1>{{page}}</h1>
循环模板指令
vue中，循环模板指令通过v-for=”item in data”
ng6中，循环模板指令通过ngFor定义的
语法 *ngFor=”let item of data”
let和of表示关键字
data 表示遍历的数据
item 表示成员值
除了item循环变量之外，还提供了一些循环变量
index 索引值
first 是否是第一次
last 是否是最后一次
odd 是否是奇数次
even 是否是偶数次
注意：计算机是从0开始计数的，因此
计算机中的偶数次，就是人看到的奇数次
计算机中的奇数次，就是人看到的偶数次
虽然存在这些循环变量，但是我们无法直接使用，必须先定义再使用
index as $index
此时$index就代表索引值了
当使用循环模板指令控制多个元素的时候，就要使用模板组件ng-template
此时语法有些改变
ngFor 声明循环指令
[ngForOf]=”data” 定义循环的数据
let-item 定义循环变量
举例：
<ul>
<li *ngFor="let item of colors; index as index; first as f; last as $last; even as even; odd as odd">{{item}}--{{index}}--{{f}}--{{$last}}--{{even}}--{{odd}}</li>
<li *ngFor="let item of colors; index as index; first as f; last as $last; even as even; odd as odd" [style.backgroundColor]="even ? '#efefef' : 'yellowgreen'">{{item}}--{{index}}--{{f}}--{{$last}}--{{even}}--{{odd}}</li>
</ul>
<!-- 控制多个元素，使用模板标签 -->
<ul>
<ng-template ngFor [ngForOf]="colors" let-item>
<h1>{{item}}</h1>
<h2>{{item}}</h2>
</ng-template>
</ul>
