Блог

Я добавил список хостов для прослушивания события onclick. Если event.target.nodename является значком CLR, он вызовет источник событий.

При тестировании я пытаюсь щелкнуть значок среды clr, и он не запускает функцию onclick, определенную для hostListner.

 // 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> 
  `;
}
 

В качестве обходного пути я изменил использование «документ:щелчок» или «тело:щелчок» вместо этого, он вызывает функцию, но возникают проблемы — как только страница загружается, она автоматически вызывает функцию щелчка, даже если мастер не отображается, и пользователь еще не видел или не нажимал на значок 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?