踩坑實錄---Angular防抖——點擊事件

npx ng g directive DebounceClickDirective --module=app

然后自動生成了2 個文件

CREATE src/app/debounce-click-directive.directive.spec.ts (290 bytes)
CREATE src/app/debounce-click-directive.directive.ts (173 bytes)

檢查一下

debounce-click-directive.directive.spec.ts

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

@Directive({
  selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit, OnDestroy {
  @Input('appDebounceClick') debounceTime = 500;
  @Output() debounceClick = new EventEmitter();
  private clicks = new Subject<any>();
  private subscription: Subscription;

  constructor() {
  }

  ngOnInit() {
    this.subscription = this.clicks.pipe(
      debounceTime(this.debounceTime)
    ).subscribe(e => this.debounceClick.emit(e));
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

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

  @HostBinding()
  test() {
    //
  }
}

再檢查一下app.module.ts

src/app/

 

import { DebounceClickDirective } from './debounce-click-directive.directive';

@NgModule({
declarations: [AppComponent, DebounceClickDirective],

注意啊！！這里有個坑，有的項目是分模塊的，注冊到app.module有的時候也是不管用的，你需要注冊到距離你需要用到的最近的模塊，因為這個是按需引入的，

要不然你這個自定義指令是沒卵用的哦！！！！

然后很簡單

你的html就可以直接使用了

  <button (click)="myappDebounceClick()">即刻執行</button>
  <button appDebounceClick (debounceClick)="myappDebounceClick()">使用默認時間間隔來執行</button>
  <button appDebounceClick (debounceClick)="myappDebounceClick()" [debounceTime]="2000">自定義時間執行Debounced12
    Click</button>

再放一次自定義指令文件代碼

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

@Directive({
  selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit {
  @Input() debounceTime = 500;
  @Output() debounceClick = new EventEmitter();
  private clicks = new Subject();
  private subscription: Subscription;

  constructor() { }

  ngOnInit() {
    this.subscription = this.clicks.pipe(
      debounceTime(this.debounceTime)
    ).subscribe(e => this.debounceClick.emit(e));
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

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

 

好了，完成了~~    三種情況自己看吧~