angular自定义属性指令

在angular中有三种类型的指令：

1. 组件–拥有模板的指令；
2. 结构性指令–通过添加和移除DOM元素改变DOM布局的指令;
3. 属性型指令–改变元素、组件或其他指令的外观和行为的指令；

组件是这三种指令中最常用的。结构性指令修改视图的结构，例如ngfor和ngif。属性型指令改变一个元素的外观或行为。

属性型指令至少需要一个带有 @Directive 装饰器的控制器类。该装饰器指定了一个用于标识属性的选择器。 控制器类实现了指令需要的指令行为。

比如定义一个名为“highlight”的属性型指令：

在cmd的命令窗口里面执行命令：ng generate directive highlight

生成的 src/app/highlight.directive.ts 文件如下：

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor() { }
}

View Code

这里导入的 Directive 符号提供了 Angular 的 @Directive 装饰器。

@Directive 装饰器的配置属性中指定了该指令的 CSS 属性型选择器 [appHighlight]

这里的方括号([])表示它的属性型选择器。 Angular 会在模板中定位每个拥有名叫 appHighlight 属性的元素，并且为这些元素加上本指令的逻辑。

正因如此，这类指令被称为 属性选择器 。

在构造函数里加相关逻辑，比如，实现把宿主元素的背景色设置为黄色：

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

View Code

 

import 语句还从 Angular 的 core 库中导入了一个 ElementRef 符号。

你可以在指令的构造函数中使用 ElementRef 来注入宿主 DOM 元素的引用，也就是你放置 appHighlight 的那个元素。

ElementRef 通过其 nativeElement 属性给你了直接访问宿主 DOM 元素的能力。

这里的第一个实现把宿主元素的背景色设置为了黄色。

使用属性型指令：

Highlight me!

　　

总结：Angular 在宿主元素 p 上发现了一个 appHighlight 属性。 然后它创建了一个 HighlightDirective 类的实例，并把所在元素的引用注入到了指令的构造函数中。 在构造函数中，该指令把 p 元素的背景设置为了黄色。

以上只是简单的设置元素的颜色，如果需要鼠标悬浮一个元素时，设置它的颜色，响应用户引发的事件：

先把 HostListener 加进导入列表中。

src/app/highlight.directive.ts (imports)：

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

然后使用 HostListener 装饰器添加两个事件处理器，它们会在鼠标进入或离开时进行响应。
src/app/highlight.directive.ts (mouse-methods):

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('yellow');
}

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

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

View Code

 

这个辅助方法（highlight）被从构造函数中提取了出来。 修改后的构造函数只负责声明要注入的元素 el: ElementRef。

src/app/highlight.directive.ts (constructor):

constructor(private el: ElementRef) { }

 

下面是修改后的指令代码：

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) { }

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

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

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

View Code