入手方式:
绑定宿主元素的事件,事件绑定的时候捕捉到这个事件源$event
(table指令,这是属性型指令的重点)。
今天来学习一下属性型指令。 属性型指令把行为添加到<u>现有元素上。</u> 属性型指令用于改变一个 DOM 元素的外观或行为。
自己创建属性型指令的必要条件:
import { Directive, ElementRef, Input, Renderer } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
constructor(el: ElementRef, renderer: Renderer) {
renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
}
}
需求 鼠标悬浮一个元素时,显示字的背景颜色。
实现 把@HostListener装饰应用到事件触发时需调用的方法。
/**
* 参数1:DOM事件的名字
* 参数2:注入的事件,常用的是$event
*/
@HostListener('click', ['$event']) onclick(event: MouseEvent) {}
@HostListener('mouseenter') onMouseEnter() {
/* . . . */
}
@HostListener('mouseleave') onMouseLeave() {
/* . . . */
}
@Input('myHighlight') highlightColor: string; // 属性
<p [myHighlight]="color">Highlight me!</p> // 页面