自定义指令——属性指令

属性指令(Attribute directive)：用于改变组件的外观或行为

一个属性指令需要一个控制器类，该控制器类使用@Directive装饰器来装饰。@Directive装饰器指定了用以标记指令所关联属性的选择器，控制器类则实现了指令所对应的特定行为。

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

@Directive({
            selector: '[appBeautifulbackground]'
 })

export class BeautifulbackgroundDirective {

              constructor(el:ElementRef) {
                        el.nativeElement.style.backgroundColor = "yellow";
              }
}

在上述代码示例中，首先从Angular核心模块@angular/core中引入了 Directive和ElementRef。Directive被用作@Derective装饰器，而ElementRef则用来访问DOM元素。随后，在@Directive装饰器中以键值对的形式定义了指令的元数据。在配置对象中，使用selector属性来标识该属性指令所关联的元素名称。[appBeautifulbackground]是指令所对应的CSS选择器，注意中括号“[]”不能丢，中括号在CSS选择器中表示元素属性匹配。所以当指令运行时， Angular会在模板中匹配所有包含属性名称appBeautifulbackground的DOM元素。

在@Directive元数据下面是该自定义指令的控制器类，该类实现了指令所包含的逻辑，export关键字被用来将指令导出以供其它组件访问。

Angular会为每一个匹配的DOM元素创建一个指令实例，同时将ElementRef作为参数注入到控制器构造函数。使用ElementRef服务，可以在代码中通过其nativeElement属性直接访问DOM元素，这样就可以通过 DOM API设置元素的背景颜色。

我的背景色

在上述代码中，首先在 AppModule中引入自定义指令代码文件，并在 @NgModel装饰器中，为declarations属性赋值声明引用。然后在Appcomponent组件的模板中，在将要使用指令的目标元素上，添加 mybeautifulbackground属性，这一属性名需要与自定义指令的@Directive装饰器中选择器匹配。

运行这一示例时, Angular会在组件的

元素上解析到appBeautifulbackground属性，然后创建 BeautifulbackgroundDirective指令类的实例，将元素的引用传入构造函数,用以设置元素的样式。

input

在上述自定义指令中，为元素设置的背景色是固定的。为了增加灵活性，可以在指令外部使用绑定的方式设置背景色。

我的背景色

为了给指令绑定外部变量，需要为指令声明一个可绑定的输入属性backgroundColor。需要在属性上使用@Input装饰器，@Input标识使得属性具有绑定能力，可将外部变量的值绑定到指令的属性中。

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

@Directive({
      selector: '[appBeautifulbackground]'
 })
export class BeautifulbackgroundDirective {
          @Input("appBeautifulbackground")
          backgroundColor:string = "yellow";

          constructor(el:ElementRef) {
                  console.log(this.backgroundColor);
                  el.nativeElement.style.backgroundColor = this.backgroundColor;
         }
}

注意上述代码的@Input(“appBeautifulbackground”)装饰器中，为输入属性backgroundColor指定了appBeautifulbackground别名。注意这里指定的别名，与指令在@Directive装饰器中定义的选择器名称一致，这并不是必须的。这里定义成一致的，是为了在元素中使用指令时，不必再使用另外的名称来绑定输入变量。当然，也可以为backgroundColor属性定义其他的别名，如将属性别名定义为@Input( ‘myBackgroundColor’)，这时需要在组件中使用如下的方式来绑定这一属性：

我的背景色

上述示例中，为绑定属性名和别名分别命名了不同的名称。如果不需要为属性提供不同的别名，则可以在@Input装饰器中省略对别名的定义，使用如下所示的便捷定义

@Input()
backgroundColor:string = "yellow";

那么上述省略对别名定义后，在模板中用法如下：

我的背景色

现在已经为指令定义了用来绑定输入变量的属性，在组件模版中，将color变量绑定给这一属性，color变量可以来自多个地方，可以是组件中定义的变量，也可以来自组件模版的输入元素。

      绿色
      黄色
      红色


我的背景色

HostBinding 装饰器

该指令用于演示如何利用 HostBinding 装饰器，设置元素的 innerText 属性。

指令的实现

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

@Directive({
  selector: '[appChange]'
})
export class ChangeDirective {

  @HostBinding() innerHTML:string = "test";
  @HostBinding("style.color") get color(){
    return "red"
  }
}

指令的应用

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

@Component({
  selector: 'app-root',
  template: `
    
Hello, Angular
    
Hello, Angular
  `,
})
export class AppComponent { }

HostListener装饰器

@Directive({
  selector: '[appChange]'
})
export class ChangeDirective {

  @HostBinding() innerHTML:string = "test";
  @HostBinding("style.color") get color(){
    return "red"
  }
  @HostListener("click",['$event.target']) onclick(btn:HTMLElement){
      this.innerHTML = Math.random() * 1000 + "";
      console.log(btn);
  }
}