收获：

创建一个属性指令

1.使用CLI命令创建一个指令directive

ng g directive highlight

@Directive() 会指定指令的 CSS 属性选择器 [highlight]。

2.从 @angular/core 导入 ElementRef。ElementRef 的 nativeElement 属性会提供对 DOM 元素的访问权限。

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

并在 constructor() 中引入 ElementRef 

constructor(el: ElementRef) { 

    el.nativeElement.style.backgroundColor = 'yellow';  //设置hightlight属性的DOM元素背景颜色会是黄色

}

处理用户事件，如鼠标悬浮，鼠标离开等

1.从 '@angular/core' 导入 HostListener，用来监听宿主元素上的事件。

import { HostListener } from '@angular/core'

2.

@HostListener('mouseenter') onMouseEnter() {

  this.highlight('yellow');                     //鼠标悬浮执行函数hightlight('yellow')

}

@HostListener('mouseleave') onMouseLeave() {

  this.highlight('');                                 //鼠标悬浮执行函数hightlight('')

}

private highlight(color: string) {

  this.el.nativeElement.style.backgroundColor = color;      //设置宿主元素的背景颜色

}

向指令传递值

1.从 @angular/core 导入 Input。

import { Input } from '@angular/core'

2.添加 Highlight 的 @Input() 属性。

@Input() highlight = '';

3.引入

<p highlight="yellow">Highlight me!</p>

4.如果要进行双向绑定，加上[]

<p [highlight]="color">Highlight me!</p>

绑定第二个属性

1.添加 Highlight 的第二个 @Input() 属性。

@Input() defaultColor = '';

2.修改指令的 onMouseEnter，使其首先尝试使用 highlightColor 进行突出显示，然后尝试 defaultColor，如果两个属性都 undefined，则变回 red。

@HostListener('mouseenter') onMouseEnter() {

  this.highlight(this.highlight || this.defaultColor || 'red');       //首先使用hightlight，如果未定义使用defaultColor，如果还未定义，使用red

}

3.引入

<p [highlight]="color" defaultColor="pink">

  Highlight me too!                           //首先使用color，如果color未定义，使用pink

</p>

<p [highlight]="color">

  Highlight me !                           //首先使用color，如果color未定义，且defaultColor也未定义，使用red

</p>