typescript - 清晰度“clr-icon”-@hostlistener 单击不起作用

Question

我添加了一个主机监听器来监听 onclick 事件。如果 event.target.nodename 是 CLR-ICON，它将调用事件发射器。

在测试它时，我尝试单击 clr-icon 并且它不会触发为 hostListner 定义的 onclick 函数。

// Original Code:

@Directive({ 
  selector: '[deleteIcon]'
})
@HostListener('click', ['$event'])
onClick(event){
  if (event?.target?.nodeName === 'CLR-ICON') {
    console.log(event);
    this.delete.next(true);
  }
}

export class ControlDeleteDirective implements AfterViewInit, OnDestroy {
 @Output()
 delete: EventEmitter<boolean> = new EventEmitter<boolean>();
 
  ngAfterViewInit () {
    setTimeout(() => {
      this.setupDeleteIcon();
    }, 0);
  }

 private setupDeleteIcon() {
  const deleteIcon = `
    <clr-icon
        shape="times-circle"
        style="color: #0076CE; cursor: pointer"
        class="is-solid"
        (click)="onClick($event)">
    </clr-icon> 
  `;
}

作为一种解决方法，我改为使用“document：click”或“body：click”，它确实调用了该函数但有问题 - 一旦页面加载，即使未显示向导并且用户也自动调用 click 函数还没有看到或点击 clr 图标。

 // my attempt - looks like it automatically call the click function even though the user have not seen or click on the clr-icon yet.

 @HostListener('document:click', ['$event'])
 if (event?.target?.nodeName === 'CLR-ICON') {
    this.delete.next(true);
 }

有没有办法仅在单击 clr 图标时触发函数调用？

标签： typescriptangular8angular-directivedirectiveclarity