六：Angular 指令 (Directives)

Angular—通用指令
　　Angular将通用指令包含在CommonModule模块中，当需要使用这些通用指令时，需要在模块中导入。
　　BrowserModule模块已经包含了CommonModule模块，所以当引入BrowserModule时，就可以使用了。
NgClass
　　利用NgClass指令，可以同时添加或移除多个类。NgClass绑定一个有形如CSS类名:value的对象，其中value的值是一个布尔型的值，当value值为true时，添加对应类型的模板元素，反之则移除。

//基本用法
<i [ngClass]="{green: true}"></i>
//判断
<i [ngClass]="{green: isAddr, red: !isAddr}"></i>

NgStyle
　　NgStyle绑定一个有形如CSS属性名:value的对象，其中value为具体的css样式

<div [ngStyle]="{'background-color':'green'}"></<div>
//判断添加
<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>

NgIf
　　指定绑定一个布尔型的表达式，当表达式返回true时，可以在DOM树节点上添加一个元素及其子元素，反之被移除

<i *ngIf="nameTip"></i>

NgSwitch、NgSwitchCase、NgSwitchDefault
　　NgSwitch:绑定到一个返回控制条件的值表达式
　　NgSwitchCase：绑定到一个返回匹配条件的值表达式
　　NgSwitchDefault:用于标记默认元素的属性

<span [ngSwitch]="favoriteHero">
  <p *ngSwitchCase="true">
    Excellent choice!
  </p>
  <p *ngSwitchCase="false">
    No movie, sorry!
  </p>
  <p *ngSwitchDefault>
    Please enter your favorite hero.
  </p>
</span>

NgFor
　　NgFor指令可以实现重复执行某些操作来展示数据。NgFor指令支持一个可选的index索引。

<ul>
    <li *ngFor="let fruit of fruitsList,let i=index">{{fruit}}</li>
</ul>

　　在一些包含复杂项目的列表中，每次更改会引起很多相互关联的DOM操作，这里使用NgFor指令会让性能变差。在服务器上重新拉取数据时，拉取的数据可能包含很多之前显示过的数据，但Angular并不知道哪些列表数据在数据更新前已经显示过，哪些没有显示过，只能清除旧列表的DOM元素，并用新的列表数据填充DOM元素来重建一个新列表。这个情况下可以用追踪函数来避免这种重复渲染。

//追踪函数
trackByFruits(index:number,fruit:Fruit){
    return fruit.id;
}

<ul>
    <li *ngFor="let fruit of fruitsList,trackBy:trackByFruits">{{fruit}}</li>
</ul>

NgTemplateOutlet
　　NgTemplateOutlet指令可以在模板中中创建内嵌视图。使用NgTemplateOutlet，需要为指令绑定一个队模板元素的引用。也就是说，使用NgTemplateOutlet指令时，需要在组件中声明一个模板元素的引用，并将这一变量绑定给指令作为输入属性。NgTemplateOutlet指定的基本用法：

<template [ngTemplateOutlet]="templateRefExpression"><template>

　　除此之外，还可以为被插入的内嵌视图绑定一个上下文对象。NgTemplateOutlet指令有一个ngOutletContext属性，通过给ngOutletContext属性绑定输入变量，可以将当前模板中获取的上下文对象绑定到被插入的内嵌视图中。

<template [ngTemplateOutlet]="templateRefExpression" ngOutletContext="objectExpression"><template>

import {Component} from "@angular/core";
@Component({
  selector: 'ng-template-outlet-example',
  template: `
    <template #foo let-name="name" let-skills="skills">
       <h4>{{name}}</h4>
       <ul>
          <li *ngFor="let s of skills">{{s}}</li>
       </ul>
    </template>
    <div [ngTemplateOutlet]="foo"
           [ngOutletContext]="msg1">       
    </div>
    <div [ngTemplateOutlet]="foo"
          [ngOutletContext]="msg2">
    </div>
`
})
export class NgTemplateOutletExample {
  msg1;
  msg2;
  constructor() {
    this.msg1 = {
      name: "Zhentian",
      skills: ["JS", "Angular"]
    };
    this.msg2 = {
      name: "Wan",
      skills: ["JSX", "React"]
    };
  }
}

NgPlural、NgPluralCase
　　NgPlural、NgPluralCase是一组搭配使用的指令。NgPlural是一个国际化指令，其作用和NgSwitch指令类似，可以看作是NgSwitch指令的一种变种，NgPluralCase指令可以类比NgSwitchCase类理解。
　　Ngplural与NgSwitch的指令差异体现在：使用NgPlural指令需要继承NgLocalization类并实现getPluralCategory()方法，在这一方法中，根据具体的分类需求，将落在某一个范围的值命名的一个分类，并将分类名称返回，而返回的分类，可以个[ngPlural]绑定值进行匹配，当值属于这一分类的定义范围时，就当匹配成功。
所以，NgSwitch指令只能进行精确匹配，而NgPlural指令除了进行精确匹配外，还可以进行范围匹配。

import {Component} from "@angular/core";


@Component({
  selector:'ng-plural',
  template:`
      <p>{{value}}</p>
      <button (click)="inc()">增加</button>
      <div [ngPlural]="value">
          <template ngPluralCase="=0">0</template>
          <template ngPluralCase="=1">1</template>
          <template ngPluralCase="other">其他</template>
      </div>
`
})
export class NgPluralExample{
  value:any="init";
  inc(){
    this.value=this.value==='init'?0:this.value+1;
  }
}