手把手教你使用Angular之指令

原文转自：轻样知生 - 手把手教你使用Angular之指令 - Tylili

        Angular官方手册中， 上一篇所讲的组件其实是被归纳到指令中的。博主之所以分开介绍，是为了让初学者能够准确将它们区分，毕竟在用法和使用场景上，组件跟下面介绍的两种指令是完全不同。本文主要介绍指令的基本概念以及如何自己制作一个指令。下面为大家详细介绍：

一、结构型指令

        所谓结构型指令，可以理解为直接控制DOM树的指令。官方给出的定义是通过添加和移除 DOM 元素改变 DOM 布局的一类指令。（原文：Structural directives—change the DOM layout by adding and removing DOM elements.）我们常用的*ngIf和*ngFor就是结构性指令。该指令必须通过@Directive装饰器来修饰，示例如下：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({ selector: '[visible]'})
export class UnlessDirective {
  private hasView = false;
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) { }
  @Input()set visible(condition: boolean) {
    if (condition && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

上例中，自定义通过TemplateRef和ViewContainerRef来实现对页面上DOM的操控。当指令的值为true时，通过将模板注入到容器中来显示DOM，否则清理容器，清除DOM。需要注意的是，指令选择器的名字和指令Input属性的名字必须相同。否则，指令无法生效。和ngIf一样，可以使用*visible或[visible]来使用该指令。

 

二、属性型指令

        所谓的属性型指令，个人理解为，通过属性型指令，我们可以控制页面元素的某些属性。官方给的定义是改变元素、组件或其它指令的外观和行为的指令。同样，Angular本身也有属性型指令，如：NgStyle。

        属性型指令的定义方法和结构型指令一样，使用@Directive装饰器来修饰：

import { Directive, ElementRef } from '@angular/core';
@Directive({
  selector: '[yellow]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

可以通过在元素上使用[yellow]来设置背景颜色为黄色。在实际的场景中，经常会使用@HostListener修饰符，以通过页面事件来实现动态控制。示例代码片段如下：

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('yellow');
}
@HostListener('mouseleave') onMouseLeave() {
  this.highlight(null);
}
private highlight(color: string) {
  this.el.nativeElement.style.backgroundColor = color;
}

将上一个实例中构造函数的函数体中的代码删掉，并添加上述代码片段即可实现鼠标选中文字时，选中部分背景色变成黄色。