Angular2的指令

前言

指令也是NG的核心部分之一，它可以用来对模板内容进行逻辑控制。结合数据绑定使用，基本就告别了手动操作DOM的时代，转而进入了美好的数据驱动的前端高效开发时代。

分类

• 属性形指令

可以监听或修改其它 HTML 元素、特性 (attribute)、属性 (property)、组件的行为。例如ngClass和ngStyle指令。

• 结构性指令

负责塑造HTML 结构。一般通过添加、删除或者操作 HTML 元素及其子元素来实现。例如ngIf和ngFor指令。

• 组件

带有模板的指令，用于组合程序逻辑和 HTML 模板，渲染出应用的视图。

应用

ngClass和ngStyle指令之前我们介绍了，让我们看看其他指令如何使用吧~

• 微模板指令

通过在指令前面加星号，是一种语法糖。NG会解开这个语法糖，变成一个，里面包裹着宿主元素及其子元素。

• *ngIf="表达式"

表达式为真的时候展现内容，这是个微模板指令。

*ngIf="getProductCount()" else="表达式2"(NG4+)

• [ngSwitch]="表达式" *ngSwitchCase="表达式2" *ngSwitchDefault

根据表达式和表达式2的匹配多选一展示内容，这是个微模板指令。使用字面量要用单引号。

    There are two products
    There are five products
    This is the default

• *ngFor="let item of 表达式"

1.迭代表达式返回的结果展现内容，这是个微模板指令。
2.它还自带一些模板变量，比如index、odd、even、first、last。
3.应对数据变更引起的刷新性能问题可以使用trackBy追踪它。

    {{item.name}}
    {{item.category}}
    {{item.price}}

• [ngTemplateOutlet]="myTempl"

重复一块内容

不影响DOM的容器，也就是说实际渲染时这块会被丢弃，常常在里面使用结构性指令

自定义指令

通常是利用NG的core库里的Directive, ElementRef, HostListener,Input等符号实现

• 创建属性指令

步骤：
1.使用Directive声明一个指令
2.用ElementRef间接操作DOM
3.用HostListener监听DOM事件
4.使用Input自定义属性

• 创建结构指令

1.使用Directive声明一个指令
2.使用ngOnChanges钩子和SimpleChange检测属性变更并更新DOM结构
3.使用TemplateRef和ViewContainerRef管理DOM元素
4.使用$implicit隐式变量提供额外的上下文数据，实现模板输入变量
5.和迭代有关的还要引入IterableDiffer, IterableDiffers,ChangeDetectorRef, CollectionChangeRecord, ViewRef

• 创建组件
  1.使用Component声明一个组件
  2.使用ViewChildren装饰器获取模板中的元素
  3.组件间都是互相隔离的，默认影子DOM模式
  4.组件充当了“控制器 (controller) ”和“视图模型 (view model) ”的角色

总结

属性形指令免去了我们对DOM的style或者classList进行操作、结构指令免去了在js里createElement、appendElement等创建删除DOM节点等操作，组件