angular2 的属性型指令

angular2 的属性型指令是一个自定义的一个属性设置，可以给我们想设的dome添加一个自定义的一个属性，比如颜色，大小等，可根据自己设置的这个属性型指令来自己添加。

第一步创建自定义的directive文件：

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

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.fontSize = 12 +'px';
    }
}

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

1. Directive提供@Directive装饰器功能。

2. ElementRef注入到指令构造函数中。这样代码就可以访问 DOM 元素了。

3. Input将数据从绑定表达式传达到指令中。

以上的简单的自定义属性改变dome的字体大小。

@Directive装饰器需要一个 CSS 选择器，以便从模板中识别出关联到这个指令的 HTML。

这里，指令的选择器是[myHighlight]，Angular 将会在模板中找到所有带myHighlight属性的元素。

那怎么用呢

<p appHightlight>Highlight me!</p>

angular就会根据这个appHightlight找到对应的dome元素，然后加上相应的属性。

但我们别忘了将HighlightDirective添加在Module的declaration中。

总结：Angular 在<p>元素上发现了一个myHighlight属性。 然后它创建了一个HighlightDirective类的实例，并把所在元素的引用注入到了指令的构造函数中。 在构造函数中，我们把<p>元素设置了字体大小。

响应用户引发的事件

以上只是立刻显示改变的属性

现在添加根据用户鼠标的进入和离开来判断改变属性

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

上面中我们引入一个HostListener的装饰器用来添加事件处理器，比如：

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('yellow');
}

@HostListener('mouseleave') onMouseLeave() {
  this.highlight(null);
}

private highlight(color: string) {
  this.el.nativeElement.style.backgroundColor = color;
}

我们用HostListener来添加了鼠标进入和鼠标离开的两个事件。根据事件显示不同的颜色背景。

接下来使用数据绑定项指令传递值，用到了Input和Output

比如：

@Input() highlightColor: string;

设置了一个输入的属性highlightColor，用来从外部传入一个颜色。

用法是这样的：

<p appHightlight highlightColor="yellow">Highlighted in yellow</p>
<p appHightlight [highlightColor]="'orange'">Highlighted in orange</p>

感觉是不是很简单。也可用一个Output输出一个值。

例如：

import { Directive, ElementRef, Output, EventEmitter, OnInit } from '@angular/core';

@Directive({
  selector: '[appScrollMoreDirective]',
})

export class ScrollMoreDirective {
  @Output()
  more = new EventEmitter();

  constructor(el: ElementRef) {
    const self = this;
    const element = el.nativeElement;
    // element.style.backgroundColor = 'yellow';
    element.addEventListener('scroll', function () {
      if (element.scrollTop + element.clientHeight === element.scrollHeight) {
        self.more.emit('');
      }
    });
  }

}

以上使用来判断滚动条当滚动到底部的时候触发事件。

这是属性型指令简单用法的介绍。