在这篇文章中，我们将介绍使用 Angular Directive API 来创建自定义 debounce click 指令。该指令将处理在指定时间内多次点击事件，这有助于防止重复的操作。
对于我们的示例，我们希望在产生点击事件时，实现去抖动处理。接下来我们将介绍 Directive API，HostListener API 和 RxJS 中 debounceTime 操作符的相关知识。首先，我们需要创建 DebounceClickDirective 指令并将其注册到我们的 app.module.ts 文件中：
selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit {
constructor() { }
ngOnInit() { }
}
@NgModule({
imports: [BrowserModule],declarations: [
AppComponent,DebounceClickDirective
],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }
Angular 指令是没有模板的组件，我们将使用以下方式应用上面的自定义指令：
在上面 HTML 代码中的宿主元素是按钮，接下来我们要做的第一件事就是监听宿主元素的点击事件，因此我们可以将以下代码添加到我们的自定义指令中。
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 操作符。
selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit {
@Output() debounceClick = new EventEmitter();
private clicks = new Subject@L_403_0@
