directive
通过directive可以获取到dom节点,并且可以在基础事件之上分装自定义的一些事件
###例子
host-listen.directive.ts
import { Directive, Output, EventEmitter, OnInit, Renderer, Renderer2, ElementRef } from '@angular/core';
@Directive({
selector: '[appHostListen]'
})
export class HostListenDirective implements OnInit{
@Output('myEvent') myEvent: EventEmitter<any> = new EventEmitter();
constructor(public rd: Renderer, public rd2: Renderer2, public ele: ElementRef) { }
onClick() {
}
ngOnInit() {
this.rd.listen(this.ele.nativeElement, 'click', () => {
console.log('sss');
this.myEvent.emit('my event');
});
}
}
使用
<div class="demo-container">
<button appHostListen (myEvent)="myselfClick()">test</button>
</div>
ps: 也可以把 @Output(‘myEvent’) 中的myEvent和directive 的selector名称设置成一样,那么<button (appHostListen )=“myselfClick()”>test