手把手教你使用Angular之指令

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

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

一、结构型指令

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

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({ selector: '[visible]'})
export class UnlessDirective {private hasView = false;constructor(private templateRef: TemplateRef,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;}}
}

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

二、属性型指令

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

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

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

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

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

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