在 Angular 中有三种类型的指令：
- 组件 — 拥有模板的指令
- 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 eg: NgFor 和 NgIf。
- 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。 eg: NgStyle
注：
在一个宿主元素上可以使用多个属性型指令，但只能使用一个结构型指令
属性型: [prop], 结构型: *direct, *被angular解开为<ng-template></ng-template>
一.属性型指令
1. 内置属性性指令
（1）
单个class： [class.样式名]='布尔值'
一组class： [ngClass] = {(1)哈希值}
currentClasses:{};
setCurrentClasses(){
this.currentClasses={
'saveable':this.canSave,
'modified':!this.isUnchanged,
'special':this.isSpecial
};
}
模板：<div
[ngClass]="currentClasses">special</div>
（2）
单个内置样式：[style.font-size]="isSpecial
? 'x-large' : 'smaller'"
一组内置样式：
同上，模板为
<div [ngStyle]="currentStyles"></div>
(3)
ngModel双向数据 ，需要引入 FormsModule
<input
[(ngModel)]="currentHero.name">
2. 自定义属性型指令
模板：<p
[appHighlight]="color">Highlight
me!</p>
二. 结构型指令
1. 内置结构型指令
（2）<div
*ngFor="let
hero of heroes">{{hero.name}}</div>
（3）tractBy:只有发生变化才更新，未发生变化的数据不会进行更新（不用，会全部数据进行刷新，不管其是否发生变更）
模板：<div
*ngFor="let
hero of heroes; trackBy: trackByHeroes">
({{hero.id}}) {{hero.name}}</div>
controller:trackByHeroes(index:
number,
hero:Hero):
number {return
hero.id;}
（4）<div
[ngSwitch]="currentHero.emotion">
<app-happy-hero
*ngSwitchCase="'happy'"
[hero]="currentHero"></app-happy-hero>
</div>
（5） 模板输入变量（let hero ofheroes; let i=index;)与模板引用变量（#val)的区别：
模板输入变量：作用于在元素整个循环中，循环结束则释放，不可在其他地方进行引用
模板引用变量：代表当前元素，可在模板的任何地方引用此元素，作用于整个模板。
注：结构型容器有<ng-container>或者<div>,尽量不添加无意义的元素，当没有合适的容器元素时，可以使用
<ng-container>对元素进行分组。<ng-container>是一个分组元素，不会影响样式或布局。2.
自定义结构型指令
（1）模板：<p
*appUnless="condition">false
show</p>
三. 组件：带模板的指令