angular之自定义 directive

1，指令的创建至少需要一个带有@Directive装饰器修饰的控制器类。@Directive装饰器指定了一个选择器名称，用于指出与此指令相关联的属性的名字。

2，创建一个highlight.directive.ts文件 可以用命令 ng g directive highlight;内容如下

这里是做一个给元素加色彩的一个指令。　　

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. 指令的名称应该具备一定的自解释性，这样方便我们通过指令的名称就能大概知道指令的用途。

3,使用  <div appHighlight ></div> 这样这个div就会显示yellow色；

　　　　 请记的声明。没有声明会报错如下

　　　　　　EXCEPTION: Template parse errors: 
　　　　　　Can’t bind to ‘appHighlight’ since it isn’t a known property of ‘div’.

这是最简单的形式；复杂的可以可以带事件，带参数；如下：

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';
}