原文转自:轻样知生 - 手把手教你使用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;
}
将上一个实例中构造函数的函数体中的代码删掉,并添加上述代码片段即可实现鼠标选中文字时,选中部分背景色变成黄色。