属性型指令与结构型指令

在 Angular 中有三种类型的指令：

1. 组件 — 拥有模板的指令
2. 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令    eg: NgFor 和 NgIf。
3. 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。     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. 自定义属性型指令

     属性型指令至少需要一个带有 @ Directive 装饰器的控制器类

     模板： <p [ appHighlight ] = "color" > Highlight me! </p>

• 

二. 结构型指令

1. 内置结构型指令

（1） <app-hero-detail * ngIf = "isActive" ></app-hero-detail>

（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>

<app-unknown-hero * ngSwitchDefault [ hero ] = "currentHero" ></app-unknown-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>

三. 组件：带模板的指令