如何防止angular子组件的click事件过早被触发？

<parent-component (click)="handleParentClick()">
  <child-component (click.stop)="handleChildClick()"></child-component>
</parent-component>

handleChildClick() {
  setTimeout(() => {
    // 处理click事件的逻辑
  }, 200); // 延迟200毫秒触发事件
}

handleChildClick() {
  if (this.canHandleClick) {
    // 处理click事件的逻辑
  }
}

import { HostListener } from '@angular/core';

export class ChildComponent {
  private clickSubscription: Subscription;

  constructor(private elementRef: ElementRef) {}

  ngAfterViewInit() {
    this.clickSubscription = fromEvent(this.elementRef.nativeElement, 'click')
      .pipe(
        // 添加其他操作符，如debounceTime、filter等
      )
      .subscribe(() => {
        // 处理click事件的逻辑
      });
  }

  ngOnDestroy() {
    if (this.clickSubscription) {
      this.clickSubscription.unsubscribe();
    }
  }
}