Angular 使用 HostListener 监听 Window 点击事件并清除上一次事件

在 Angular 中，可以使用 @HostListener 装饰器来监听 DOM 事件。如果你要清除上一次事件，可以使用 RxJS 的 Subject 来实现。

首先，在组件中定义一个 Subject：

private clickSubject = new Subject();

然后在 @HostListener 中将事件推送到 Subject 中：

@HostListener('window:click', ['$event'])
onClick(event: MouseEvent) {
  this.clickSubject.next(event);
}

接着，在组件的 ngOnInit() 方法中订阅 Subject，并在订阅之前清除前一次订阅：

ngOnInit() {
  this.clickSubject
    .pipe(
      debounceTime(500)
    )
    .subscribe(event => {
      // handle click event
    });
}

在这个例子中，我们使用 debounceTime 操作符来延迟事件处理，确保只有最近的一次事件被处理。如果你要取消订阅，可以使用 Subscription 对象的 unsubscribe() 方法：

private subscription: Subscription;

ngOnInit() {
  this.subscription = this.clickSubject
    .pipe(
      debounceTime(500)
    )
    .subscribe(event => {
      // handle click event
    });
}

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