Angular中自定义Debounce Click指令防止重复点击

在这篇文章中，我们将介绍使用 Angular Directive API 来创建自定义 debounce click 指令。该指令将处理在指定时间内多次点击事件，这有助于防止重复的操作。

对于我们的示例，我们希望在产生点击事件时，实现去抖动处理。接下来我们将介绍 Directive API，HostListener API 和 RxJS 中 debounceTime 操作符的相关知识。首先，我们需要创建 DebounceClickDirective 指令并将其注册到我们的 app.module.ts 文件中：

import { Directive, OnInit } from '@angular/core';@Directive({ selector: '[appDebounceClick]'})export class DebounceClickDirective implements OnInit { constructor() { } ngOnInit() { }}@NgModule({ imports: [BrowserModule], declarations: [  AppComponent,  DebounceClickDirective ], providers: [], bootstrap: [AppComponent]})export class AppModule { }

Angular 指令是没有模板的组件，我们将使用以下方式应用上面的自定义指令：

<button appDebounceClick>Debounced Click</button>

在上面 HTML 代码中的宿主元素是按钮，接下来我们要做的第一件事就是监听宿主元素的点击事件，因此我们可以将以下代码添加到我们的自定义指令中。

import { Directive, HostListener, OnInit } from '@angular/core';@Directive({ selector: '[appDebounceClick]'})export class DebounceClickDirective implements OnInit { constructor() { } ngOnInit() { } @HostListener('click', ['$event']) clickEvent(event: MouseEvent) {  event.preventDefault();  event.stopPropagation();  console.log('Click from Host Element!'); }}

在上面的例子中，我们使用了 Angular @HostListener 装饰器，该装饰器允许你轻松地监听宿主元素上的事件。在我们的示例中，第一个参数是事件名。第二个参数 $event，这用于告诉 Angular 将点击事件传递给我们的 clickEvent() 方法。

在事件处理函数中，我们可以调用 event.preventDefault() 和 event.stopPropagation() 方法来阻止浏览器的默认行为和事件冒泡。

Debounce Events

现在我们可以拦截宿主元素的 click 事件，此时我们还需要有一种方法实现事件的去抖动处理，然后将它重新发送回父节点。这时我们需要借助事件发射器和 RxJS 中的 debounce 操作符。

import { Directive, EventEmitter, HostListener, OnInit, Output } from '@angular/core';import { Subject } from 'rxjs/Subject';import 'rxjs/add/operator/debounceTime';@Directive({  selector: '[appDebounceClick]'})export class DebounceClickDirective implements OnInit {  @Output() debounceClick = new EventEmitter();  private clicks = new Subject<any>();  constructor() { }  ngOnInit() {    this.clicks      .debounceTime(500)      .subscribe(e => this.debounceClick.emit(e));  }  @HostListener('click', ['$event'])  clickEvent(event: MouseEvent) {    event.preventDefault();    event.stopPropagation();    this.clicks.next(event);  }}