Angular的Directive指令怎么使用

Highlightme!

Highlightme!

下面 我们来实现这个例子

import{Directive,ElementRef,HostListener,Input}from'@angular/core';

//Directive装饰器可以接收一个对象参数但是现在我们还不需要
@Directive()
exportclassHighlightDirective{
//给这个指定定义一个highlight属性
@Input()highlight='yellow';

//这里的el就是被我们的指令直接修饰的那个dom
constructor(privateel:ElementRef){
//你可以在这里直接操作dom
}

//给这个dom定义一个mouseenter的监听器后面的名字可以自定定义
@HostListener('mouseenter')
onMouseEnter(){
this.highlight(this.highlight);
}

//添加鼠标移出的监听器绑定对应的事件逻辑
@HostListener('mouseleave')
onMouseLeave(){
this.highlight('');
}

privatehighlight(color:string){
this.el.nativeElement.style.backgroundColor=color;
}
}