angular实现vue的click.stop

angular实现vue的click.stop, 并添加节流

import { Directive, EventEmitter, Output, HostListener } from '@angular/core';
@Directive({
  selector: '[appClickStop]'
})
export class ClickStopDirective {
  @Output() clickStop = new EventEmitter<MouseEvent>();
  constructor() { }

  @HostListener('click', ['$event'])
  clickEvent(event: MouseEvent) {
    event.stopPropagation();
    event.preventDefault();
    this.clickStop.emit(event);
  }
}

以上就可以正常使用

 <div style="background-color: blue; height: 50px; width: 50px;" appClickStop (clickStop)="testClick()"></div>

修改output的别名为click.stop，同时修改selector为click.stop， 就可以如vue的click.stop一样使用

@Directive({
  selector: '[click.stop]'
})

 @Output('click.stop') clickStop = new EventEmitter<MouseEvent>();

 <div style="background-color: blue; height: 50px; width: 50px;"  (click.stop)="testClick()"></div>

我们还可以再加上节流，这就要使用Subject

import { Directive, EventEmitter, Output, HostListener, OnDestroy, OnInit, Input } from '@angular/core';
import { Subject,  } from 'rxjs';
import { takeUntil,  throttleTime} from 'rxjs/operators';

@Directive({
  selector: '[click.stop]',
})
export class ClickStopDirective implements OnInit ,OnDestroy{
  @Output('click.stop') clickStop = new EventEmitter<MouseEvent>();
  /// 自定义间隔
  @Input() throttleTime = 1000;
  
  click$: Subject<MouseEvent> = new Subject<MouseEvent>()
  onDestroy$ = new Subject();

  @HostListener('click', ['$event'])
  clickEvent(event: MouseEvent) {
    event.stopPropagation();
    event.preventDefault();
    this.click$.next(event);
  }

  constructor() {   }

  ngOnInit() {
    this.click$.pipe(
      takeUntil(this.onDestroy$),
      throttleTime(this.throttleTime)
    ).subscribe((event)  => {
      this.clickStop.emit(event);
    }) 
  }

  ngOnDestroy() {
    /// 销毁并取消订阅
    this.onDestroy$.next();
    this.onDestroy$.complete();
  }
}