指令概览
在 Angular 中有三种类型的指令：
-
组件 — 拥有模板的指令
-
结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令
-
属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。
组件是这三种指令中最常用的。
结构型指令 修改视图的结构。例如，NgFor 和 NgIf。
属性型指令改变一个元素的外观或行为。例如，内置的 NgStyle 指令可以同时修改元素的多个样式。
属性型指令
属性型指令至少需要一个带有 @Directive 装饰器的控制器类。该装饰器指定了一个用于标识属性的选择器。 控制器类实现了指令需要的指令行为。
/* 引入 指令*/ import { Directive,ElementRef} from '@angular/core';
/* @Directive 装饰器的配置属性中指定了该指令的 CSS 属性型选择器 */
@Directive({
/* [] 方括号表示它的属性型选择器*/ s
elector: '[appHighlight]'
})
/* 指令的控制器类 */
export class HighlightDirective {constructor(el:ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
<p appHighlight>Highlight me!</p>
总结：Angular 在宿主元素 <p> 上发现了一个 appHighlight 属性。 然后它创建了一个 HighlightDirective 类的实例，并把所在元素的引用注入到了指令的构造函数中。 在构造函数中，该指令把 <p> 元素的背景设置为了黄色。
响应用户引发的事件
HostListener 加进导入列表中。
import { Directive, ElementRef, HostListener } from '@angular/core';
然后使用 HostListener 装饰器添加两个事件处理器，它们会在鼠标进入或离开时进行响应。
ts
import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective {
/* 构造函数只负责声明要注入的元素el: ElementRef 来为 DOM 元素（el）设置颜色
构造函数中注入 ElementRef，来引用宿主 DOM 元素，ElementRef 通过其 nativeElement 属性给你了直接访问宿主 DOM 元素的能力。*/
constructor(private el: ElementRef) { }
@Input() defaultColor: string;
/*绑定到 @Input 别名 appHighlight*/
@Input('appHighlight') highlightColor: string;
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.highlightColor || this.defaultColor || 'red');
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
html
<div> <input type="radio" name="colors" (click)="color='lightgreen'">Green <input type="radio" name="colors" (click)="color='yellow'">Yellow <input type="radio" name="colors" (click)="color='cyan'">Cyan </div> <p [appHighlight]="color">Highlight me!</p> <p [appHighlight]="color" defaultColor="violet"> Highlight me too! </p>
根据属性名在绑定中出现的位置来判定是否要加 @Input。