Angular 自定义属性指令

1. 新建一个指令

ng g directive light

打开light.directive.ts新建的指令如下:

import { Directive } from '@angular/core';

@Directive({              // @Directive 是指令的装饰器
  selector: '[myLight]'    // myLight是在模板中使用的指令名
})
export class LightDirective {

  constructor() { }

}

导入ElementRef Input:ElementRef注入到指令构造函数中。这样代码就可以访问 DOM 元素了。Input将数据从绑定表达式传达到指令中。

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

@Directive({
  selector: '[myLight]'
})
export class LightDirective {

  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'green';
  }
}

我们就新建好了一个简单的属性指令。

2. 使用属性指令

使用属性指令的方式很简单，只需要将指令放到模板的html标签里就可以了：

<h1>My First Attribute Directive</h1>
<p myLight>  页面不见鸟~</p>

当然，还需要将这个指令声明在@NgModule中:

// app.module.ts
...
@NgModule({
  imports: [ BrowserModule ],
  declarations: [
    AppComponent,
    LightDirective    // declarations 里面可以声明组件、指令、管道。
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

这样便可以在页面中看到效果了。

页面不见鸟~

3. 响应用户触发事件

我们可以在代码中添加相应鼠标事件的代码：

// light.component.ts

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
  selector: '[myLight]'
})
export class LightDirective {
  constructor(private el: ElementRef) { }
  @HostListener('mouseenter') onMouseEnter() {
    this.Light('green');
  }
  @HostListener('mouseleave') onMouseLeave() {
    this.Light(null);
  }
  private Light(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }

所以上面是看得懂的吧。
@HostListener装饰器引用属性型指令的宿主元素，在这个例子中就是<p>。

4. 使用属性绑定向指令中传值

上面的例子我们已经实现的一个简单的指令，但是这样的指令还不够灵活，我们只能指定固定的颜色，而且颜色不能改变，按照预期我们应该是需要能够自己指定颜色才好。这时候就用到了我们刚才导入的Input装饰器。
在组件中新建一个属性用来绑定颜色：假设在AppComponent组件中：

// app.component.ts

export class AppComponent {
  public color = 'green';
}

属性绑定到模板中：

<p [myLight]="color">页面不见鸟!</p>

还需要将这个颜色值传入到指令中，指令才能起作用：

// light.directive.ts
@Input() myLight: string;

你可能需要设置一个默认颜色，如果忘记写颜色值，这时候以默认值显示，好吧，直接写完成的指令：

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

@Directive({
  selector: '[myHighlight]'
})
export class LightDirective {

  constructor(private el: ElementRef) { }

  @Input('myLight') highlightColor: string;       // 更改传入属性名为一个更语义化的变量名，可以不用。

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || 'red');  // 指定一个默认颜色
  }

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

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

5. 绑定第二个属性

一般到这里你再也看不下去了，因为指令已经写好了，心情比较浮躁。但是我还是写了。
实现的方式是相同的，我们这里只是手动指定了一个默认默认颜色，那么这个默认颜色要由用户来指定呢？
好，按照上面的方式再写一个属性defaultColor，然后用到模板中：

<p [myLight]="color" defaultColor="violet">    <!-- 颜色直接写死在这里了，你自己来改 -->
  页面不见鸟~
</p>

指令中再修改一下：

// light.directive.ts
@HostListener('mouseenter') onMouseEnter() {
  this.highlight(this.highlightColor || this.defaultColor || 'red');
}

6. 获取宿主元素的属性值

在指令中，通过Attribute装饰器来获取宿主元素的属性值。
指令写法：

 import { Directive, HostBinding, HostListener, Input, Attribute } from '@angular/core';
 // ...
 // constructor 中我们使用 @Attribute装饰器来获取宿主元素(p)的属性(hero)
  constructor(el: ElementRef, @Attribute('hero') public hero: string) {
    el.nativeElement.style.backgroundColor = 'green';
    console.log(this.hero);
  }

模板中我们也做适当的修改：

<p myLight hero="Big Keriy!">  <!-- 加上hero属性 -->
  页面不见鸟~
</p>

hero属性的写法有两种方式，当等号右边为变量时使用[hero]这种形式。为固定值的时候，看上面。