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

@Directive({

    selector: '[appHightlight]'

})

export class HighlightDirective {

    constructor(elem: ElementRef, renderer: Renderer) {

        renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');

    }

}
//ps: 

1. 首先使用 import 语句从Angular Core库中导入我们需要使用的一些功能模块。 
   使用 Directive 模块提供的 @Directive 修饰器，对 HighlightDirective 类进行功能修饰; 
   在 HighlightDirective 类的构造函数中注入 ElementRef 和 Renderer 模块的实例（这里涉及到的DI－依赖注入关系之后也会有详细的学习笔记介绍）。 
   注入 ElementRef 的目的在于让指令可以引用到真实的 DOM 元素。ElementRef这个类可以用来在宿主标签内注入其它标签的应用，这些应用并不仅仅局限于 DOM 元素。ElementRef这个类可以用来在宿主标签内注入其它标签的应用，这些应用并不仅仅局限于 DOM 元素。 
   Renderer 可以让我们在 Hightlight 类里面的逻辑代码能够正确的渲染 DOM 元素的样式。
2. 在倒入需要使用的功能模块后，我们使用@Directive装饰器以‘配置对象’参数的形式，对指令的元数据进行说明。 
   属性型指令的@Directive装饰器需要一个css选择器来指定selector的值，以便Angular编译器从模版中识别出关联到这个指令的HTML。例如：代码中的‘［］’对应的就是css选择器中的属性选择器。
3. 紧接着在@Directive元数据后面，我们声明并导出里指令的控制器类 HighlightDirective，HighlightDirective类包含了prefixHightlight指令的工作逻辑。别忘记了导出指令的控制器， 
   这样才能够让我们定义的指令被别的指令（组件）访问。
4. 需要注意的是：属性型指令的 selector 必须要对应 CSS 的属性选择器，同时命名需要遵循驼峰式命名方式

　　　　　　Tips： 在Angualr的最佳实践中推荐，
 　　　　　　　　1. 我们应该为我们定义的每一个指令，组件，服务都添加上前缀。这样做的好处在于： 确保我们自己声明定义的这些指令，组件，
　　　　　　　　　　　　服务不会与标准的HTML属性冲突，也降低与第三方指令，组件，服务冲突的可能性。
 　　　　　　　　2. 指令的名称应该具备一定的自解释性，这样方便我们通过指令的名称就能大概知道指令的用途。

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

@Directive({

  selector: '[exeBackground]'

})

export class ExeBackgroundDirective {

  private _defaultColor = 'yellow';

  @Input('exeBackground')

  backgroundColor: string; // 输入属性，用于设置元素的背景颜色

  constructor(private elementRef: ElementRef, private renderer: Renderer) {

    this.setStyle(this._defaultColor);

  }

  @HostListener('click')

  onClick() { // 监听宿主元素的点击事件，设置元素背景色

    this.setStyle(this.backgroundColor || this._defaultColor);

  }

  private setStyle(color: string) { // 调用renderer对象提供的API设置元素的背景颜色

    this.renderer.setElementStyle(this.elementRef.nativeElement,

      'backgroundColor', color);

  }

}

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

@Component({

  selector: 'my-app',

  template: `<h1 [exeBackground]="'red'">Hello {{name}}</h1>`,

})

export class AppComponent  {

  name = 'Angular';

}