angular directive 实现自定义事件

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