在Angular2中有三种类型的指令（Directive） ，如下：
1. 属性型指令 - 改变元素显示和行为的指令。例如：NgStyle …
2. 结构型指令 － 通过添加和移除DOM元素来改变DOM结构的指令。例如：NgFor,NgIf …
3. 组件 — 拥有模板的指令。
一、属性指令（ngStyle ，ngClass）
NgStyle
绑定一个有形如CSS属性名:value的对象，其中value为具体的css样式，eg：
<div [ngStyle]="{color: 'white','background-color':'green'}"></<div>
注意，在 ngStyle 的说明中，我们对 background-color 使用了单引号，但却没有对 color 使用。这是为什么呢？因为 ngStyle 的参数是一个JavaScript对象，而color 是一个合法的键，不需要引号。但是在 background-color 中，连字符是不允许出现在对象的键名当中的，除非它是一个字符串，因此使用了引号。通常情况下，尽量不会对对象的键使用引号，除非不得不用。
//动态使用
<span [ngStyle]="{color: color}">{{ color }} text</span>
//判断添加
<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>
NgClass
利用NgClass指令，可以同时添加或移除多个类。NgClass绑定一个有形如CSS类名:value的对象，其中value的值是一个布尔型的值，当value值为true时，添加对应类型的模板元素，反之则移除。
//基本用法
<div [ngClass]="{bordered: false}">此时div不包含bordered 类名</div>
<div [ngClass]="{bordered: true}">此时div含有bordered 类名</div>
//判断
<i [ngClass]="{green: isAddr,red: !isAddr}"></i>
二、结构型指令（ngIf ，ngFor ，ngSwitch）
NgIf
指定绑定一个布尔型的表达式，当表达式返回true时，可以在DOM树节点上添加一个元素及其子元素，反之被移除。
如果表达式的结果返回的是一个假值，那么元素会从DOM上被移除。
下面是一些例子：
<div *ngIf="false"></div> //不显示 <div *ngIf="a > b"></div>// <div *ngIf="str == 'yes'"></div> <div *ngIf="myFunc()"></div>
NgFor
NgFor指令可以实现重复执行某些操作来展示数据。NgFor指令支持一个可选的index索引。
它的语法是 *ngFor="let item of items" ：
let item 语法指定一个用来接收 items 数组中每个元素的（模板）变量。
items 是来自组件控制器的一组项的集合
this.cities = ['厦门','福州','漳州'];
<div class="ui list" *ngFor="let c of cities">{{ c }}</div>
获取索引
在迭代数组时，我们可能也要获取每一项的索引。
我们可以在 ngFor 指令的值中插入语法 let idx = index 并用分号分隔开，这样就可以获取索引了。
<div class="ui list" *ngFor="let c of cities; let num = index">{{ num+1 }} . {{ c }}</div>
结果如下：
1.厦门
2.福州
3.漳州
ngSwitch
有时候你需要根据一个给定的条件来渲染不同的元素。
遇到这种情况时，你可能会像下面这样多次使用 ngIf ：
<div class="container">
<div *ngIf="myVar == 'A'">Var is A</div>
<div *ngIf="myVar == 'B'">Var is B</div>
<div *ngIf="myVar == 'C'">Var is C</div>
<div *ngIf="myVar != 'A' && myVar != 'B' && myVar != 'C'">Var is something else</div>
</div>
对于这种情况，Angular引入了 ngSwitch 指令。
NgSwitch:绑定到一个返回控制条件的值表达式
NgSwitchCase：绑定到一个返回匹配条件的值表达式
NgSwitchDefault:用于标记默认元素的属性，是可选的。如果我们不用它，那么当 myVar 没有匹配到任何期望的值
时就不会渲染任何东西。
使用ngSwitch 指令来重写上面的例子：
<div class="container" [ngSwitch]="myVar">
<div *ngSwitchCase="'A'">Var is A</div>
<div *ngSwitchCase="'B'">Var is B</div>
<div *ngSwitchCase="'C'">Var is C</div>
<div *ngSwitchDefault>Var is something else</div>
</div>
三、组件
属性型指令的创建至少需要一个带有@Directive装饰器修饰的控制器类。@Directive装饰器指定了一个选择器名称，用于指出与此指令相关联的属性的名字。
接下来，开始创建一个简单的属性型指令，该指令的功能是，user-quotation-view.component.html页面刷新时获取.quotation-area的最小高度。
1、首先我们确认好指令名字，quotationArea
<div class="quotation-area" quotationArea></div>
把这个指令作为一个属性应用到一个DOM元素上，也就是我们需要为我们定一个这个指令找到一个宿主元素。
2、之后我们创建一个quotationArea.directive.tss文件，其代码结构如下：
import {Component,Directive,ElementRef,OnInit} from '@angular/core';
@Directive({ selector: '[quotationArea]'})
export class QuotationAreaDirective implements OnInit {
el:ElementRef;
constructor(el: ElementRef) {
this.el = el;
}
ngOnInit() {
const $el = $(this.el.nativeElement);
const windowHeight = document.documentElement.clientHeight; //获取窗口高度
const bar=document.getElementsByClassName('bar-nav')[0]
const barHeight =bar.clientHeight;
const heightValue=windowHeight - barHeight;
$el.css('height',(heightValue) + 'px');
}
}
3、接下来 我们需要在module.ts中来显示的声明我们自己定义的指令，以便Angualr在解析模板时，能够正确的识别我们自己定一个指令。
import {QuotationAreaDirective} from './user-quotation/user-quotation-view/quotationArea.directive';
declarations: [QuotationAreaDirective]
结果如图:
