angular2系统学习 - 属性型指令

1.简介

ng2中有三种类型的指令：
- Component 组件-拥有模版的指令
- Structural directives 结构型指令-通过添加和移除DOM元素改变DOM布局
- Attribute directives 属性型指令-改变元素的显示和行为

概括：
属性型指令通过属性绑定在元素上，等于是在DOM加载元素的时候添加了一个拦截器，这个拦截器里可以获取元素，然后改变元素的样式或挂接事件。

进入属性型指令中，ng2会将ElementRef 和 Render注入到属性型指令的构造函数中，进而获取DOM元素以及改变DOM元素。

2.创建属性型指令

属性型指令是一个用@Directive装饰器装饰的类

import { Directive, ElementRef, Input, Renderer } from '@angular/core';

@Directive({ selector: '[myAttrDire]' })
export class MyAttrDireDirective{
    constructor(el: ElementRef, renderer: Renderer){
        rednerer.setElementStyle(el, 'backgroundColor', '#333');
    }
}

• 使用Directive装饰器装饰
• ElementRef获取dom元素
• Renderer类来操作dom元素
• Input可以向属性型指令内传入数据
• selector标识符来声明指令

@Directive装饰器需要一个属性选择器，类似于css选择器要用.或#声明，而这里我们声明的格式是方括号内加属性名’[name]’

3.使用属性型指令

<p myAttrDire> 绑定属性指令</p>

4.响应事件

通过属性型指令，我们不仅能改变宿主元素的样式，还可以绑定元素的事件。

如何使用呢？

import { Directive, ElementRef, Renderer, Input, HostLintener } from '@angular.core';

@Directive({ selector: '[myAttrDire]' })
export class MyAttrDireDirective {
    constructor(private el: ElementRef, private renderer: Renderer) { }
    @HostListener('mouseenter', [$event]) onMouseEnter(event: MouseEvent){
        //event
    }
    @HostListener('mouseleave', [$event]) onMouseLeave(event: MouseEvent){
        //event
    }
}

通过属性型指令给元素绑定事件需要引入HostListener，通过他引用属性型指令的宿主元素。

这里需要注意下HostLintener处是如何处理的。

关于HostListener

这里@HostListener('mouseenter')括号内传入的是事件类型名，而后面的onMouseEnter其实就是一个方法，进入事件后执行的这个方法。所以这里onMouseEnter改成任意方法名都可以。

另外如果一个元素绑定了一个事件，同时又绑定了一个指令，指令内也绑定了这个事件，那么在运行中会先触发指令的事件，然后在触发元素绑定的事件。

5.向指令传递值

我们可以通过数据绑定的方法向属性型指令传入值。
下面来看一下如何做。

首先是模版上的变化

<p [myAttrDire]="color"> 绑定属性指令</p>

与我们之前使用时有了两个变化
- 指令myAttrDire用方括号包起来
- 指令后有赋值操作

然后是指令内的变化
指令内使用@Input接收数据。

@Input('myAttrDire') attrDireColor: string

这里数据就被绑定到了attrDireColor属性上了。

6.绑定第二个属性

假如一个属性不够用， 我们还需要更多的属性，如何处理？

我们首先肯定会想到，既然属性型指令可以传入数据，那么我再定义一个指令不就行了？no，这太麻烦了，angular给我们提供了方便的操作。

<p [myAttrDire]="color" [defaultColor]="'violet'"> 绑定属性指令</p>

export class ...{
    ...
    @Input() defaultColor: string;
}

既然我们已经使用myAttrDire指令并绑定到了p元素上，就相当于这个指令与元素已经建立了关系，所以传递其他参数，我们也不需要再去声明这样一种关系了。只需要通过这一个指令即可。

7.总结

• 属性型指令为我们操作dom的样式和行为提供了便利。
• 属性型指令可以看作是元素渲染的一个拦截器。
• 我们可以在一个向指令内传入数据，并且不止一个。