Angular：自定义属性指令

①在命令行窗口下用 CLI 命令ng g directive创建指令类文件

②将directives/light.directive.ts文件改造一番

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

/* 可以在指令的构造函数中使用 ElementRef 来注入宿主 DOM 元素的引用，也就是你放置 appLight 的那个元素。
ElementRef 通过其 nativeElement 属性给你了直接访问宿主 DOM 元素的能力。 */
/* @HostListener 装饰器让你订阅某个属性型指令所在的宿主 DOM 元素的事件，在这个例子中就是 <p> */
/* 注意看 @Input 装饰器。它往类上添加了一些元数据，从而让该指令的 highlightColor 能用于绑定 */

@Directive({
  selector: '[appLight]'
})
export class LightDirective {
  @Input('appLight') highlightColor: string;  //这里相当于是给传入的参数appLight取了一个别名

  constructor(private el: ElementRef) { }

  @HostListener('mouseenter') onMouseEnter(): void {
    this.highlight(this.highlightColor || 'red');
  }

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

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

}

③在其他组件中使用

<!-- 注意此处需传"blue",否则就是变量名了 -->
<p [appLight]='"blue"'>鼠标悬浮</p>