Angular防抖自定义指令

记录一下angular自定义指令

创建自定义指令文件debounce.directive.ts

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

@Directive({
    
    
  selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit, OnDestroy {
    
    
  @Input() public debounceTime = 500;
  @Output() public debounceClick = new EventEmitter();
  // tslint:disable-next-line
  private clicks = new Subject<any>();
  private subscription: Subscription;
  constructor() {
    
    }
  public ngOnInit(): void {
    
    
    this.subscription = this.clicks
      .pipe(debounceTime(this.debounceTime))
      .subscribe(e => this.debounceClick.emit(e));
  }
  public ngOnDestroy(): void {
    
    
    this.subscription.unsubscribe();
  }

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

指令导出

import {
    
     NgModule } from '@angular/core';
import {
    
     DebounceClickDirective } from './debounce.directive';


@NgModule({
    
    
  declarations: [
    DebounceClickDirective
  ],
  exports: [
    DebounceClickDirective
  ],
})
export class SharedDirectivesModule {
    
    
}

实际使用

<span (debounceClick)="export()" appDebounceClick [debounceTime]="300">导出模版</span>