在這篇文章中，我們將介紹使用 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);  }}