【Angular2】的Directive

Angular2的指令有以下3种

• 组件
• 属性指令
• 结构指令

组件是带有模板的真正指令，它是这三种指令中最常见的也是实际开发中用的最多的。

属性指令 用于改变元素的外观和行为。例如，ngStyle 指令可以同时改变一个元素的多个样式，我们通过把他绑定到一个组件的属性上实现文本加醋，字体为斜体，颜色设置为石灰绿等效果。

结构指令 操作DOM元素来改变DOM的布局，操纵DOM 是一个单页面页面(SPA)。3个常见内置结构指令。

• ngIf : 删除元素，非隐藏元素 （再次使用就要重组组件）
• ngFor
• ngSwitch

<div *ngIf="hero">{{hero}}</div>
<div *ngFor="#hero of heroes">{{hero}}</div>
<div [ngSwitch]="status">
  <template [ngSwitchWhen]="'1'">1</template>
  <template [ngSwitchWhen]="'2'">2</template>
  <template ngSwitchDefault>Unknown</template>
</div>

创建一个指令和创建一个组件是类似的：

• 引入Directive装饰器
• 添加一个css的属性选择器（在括号内），用于标识我们的指令
• 为用于绑定的公共input属性指定名称。（通常是指令本身的名称）
• 把装饰器应用到我们实现的类上。

unless.directive.ts (excerpt):

import {Directive,Input} from 'angular2/core';
@Directive({
    selector:'[myUnless]'
})
export class UnlessDirective{
}