Angular2 之 属性型指令

入手方式：

• 需求 – 先要弄清楚我们做什么？
• 被使用方式 – 长什么样子？什么场景被使用？怎么被使用？
• 将每个特性写成单元测试，然后写代码，将这个单元的代码测试通过后，再进行下一个特性代码的单元测试。

绑定宿主元素的事件，事件绑定的时候捕捉到这个事件源$event（table指令，这是属性型指令的重点）。

Angular指令可分为三种

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

今天来学习一下属性型指令。
属性型指令把行为添加到现有元素上。
属性型指令用于改变一个 DOM 元素的外观或行为。

创建一个属性型指令 – 初级应用

自己创建属性型指令的必要条件：

import { Directive, ElementRef, Input, Renderer } from '@angular/core';@Directive({ selector: '[myHighlight]' })export class HighlightDirective {    constructor(el: ElementRef, renderer: Renderer) {       renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');    }}

• import语句指定了从 Angular 的core库导入的一些符号。

  • Directive提供@Directive装饰器功能。
  • ElementRef注入到指令构造函数中。 这样代码可以访问 DOM 元素。
  • Input将数据从绑定表达式传达到指令中。
  • Renderer让代码可以改变 DOM 元素的样式。

• @Directive装饰器需要一个 CSS 选择器(属性名称加方括号-[attr])，以便从模板中识别出关联到这个指令的 HTML。
  指令的选择器是[myHighlight]，Angular 将会在模板中找到所有带myHighlight属性的元素。

• ElementRef是一个服务，它赋予我们通过它的nativeElement属性直接访问 DOM 元素的能力。
• Renderer服务允许通过代码设置元素的样式。
• 别忘了把这个指令添加到 NgModule 元数据的declarations数组中。

响应用户引发的事件 – 高级应用

需求
鼠标悬浮一个元素时，显示字的背景颜色。

• 检测用户的鼠标何时进入和离开这个元素。
• 通过设置和清除高亮色来响应这些操作。

实现
把@HostListener装饰应用到事件触发时需调用的方法。

@HostListener('mouseenter') onMouseEnter() {/* . . . */}@HostListener('mouseleave') onMouseLeave() {/* . . . */}

• @HostListener装饰器引用属性型指令的宿主元素，在这个例子中就是

  。

• 直接操纵 DOM 元素的方式给宿主 DOM 元素附加一个事件监听器。
  注意：正确的书写监听器，并且还要在指令被销毁的时候，必须卸掉监听器，不然会造成内存泄漏。

• 使用数据绑定向指令传递值,在定义这个属性的时候，我们调用了@Input()装饰器。

@Input('myHighlight') highlightColor: string;  // 属性 <p [myHighlight]="color">Highlight me!</p> // 页面