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

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

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

/* 可以在指令的构造函数中使用 ElementRef 来注入宿主 DOM 元素的引用，也就是你放置 appLight 的那个元素。
ElementRef 通过其 nativeElement 属性给你了直接访问宿主 DOM 元素的能力。 */
/* @HostListener 装饰器让你订阅某个属性型指令所在的宿主 DOM 元素的事件，在这个例子中就是

*/
/* 注意看 @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;
}

}

③在其他组件中使用

鼠标悬浮