angular2.0如何定义属性指令

   
   

     
     
import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
@Directive({
 selector: '[myHighlight]'
})
export class HighlightDirective {
  private _defaultColor = 'red';
 constructor(private el: ElementRef, private renderer: Renderer) { }
@Input() set defaultColor(colorName: string){
  this._defaultColor = colorName || this._defaultColor;
}
   @Input('myHighlight') highlightColor: string;
//当前，代码通过将myHighlight传递到@Input装饰器，把myHighlight属性作为highlightColor属性的别名。

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || this._defaultColor);
  }
  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

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

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

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

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

4. Renderer 让代码可以改变 DOM 元素的样式。

然后，@Directive装饰器函数以配置对象参数的形式，包含了指令的元数据。

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

用于 attribute 的 CSS 选择器就是属性名称加方括号。 这里，指令的选择器是[myHighlight]，Angular 将会在模板中找到所有带myHighlight属性的元素。

使用属性型指令

//<p myHighlight>Highlight me!</p>

//<p [myHighlight]="color">Highlight me!</p>
<p [myHighlight]="color" [defaultColor]="'violet'">
  Highlight me too!
</p>