Как я могу прикрепить событие click к элементу, добавленному в DOM с помощью плагина в Angular 7+?

Question

Я использую модуль VMWareClarity для добавления сетки данных на страницу. Как часть этой сетки данных, есть кнопка, чтобы открыть всплывающее окно над сеткой, чтобы выбрать, какие столбцы скрыть / показать. После выбора столбцов всплывающее окно можно закрыть, нажав кнопку закрытия.

Мне нужно прикрепить действие к кнопке закрытия во всплывающем окне, но я не смог получить доступ к элементу, чтобы нажатьон отображается только в DOM, когда я нажимаю кнопку «Скрыть / Показать столбцы». Я попытался добавить elementRef.nativeElement.querySelector в ngAfterViewInit, changeDetection и @HostListener, но никто не смог найти новый всплывающий элемент, загруженный в DOM.

Answer 1

В этом случае я смог использовать HostListener для документа, а затем отследить, был ли целевой элемент nodeName искомым элементом (так как каждый элемент имеет nodeName):

@HostListener('document:click', ['$event'])
onClick(event) {
    if (event.target.nodeName === 'CLR-ICON') {
      // Do something
    }
  }

Answer 2

Вы проверили родительские узлы для целевого элемента? Обычно всплывающее окно (зависит от вашей среды пользовательского интерфейса) создается на самом высоком уровне DOM в теге Body . В противном случае вы все еще можете реализовать Output() EventEmitter, как показано здесь: https://ultimatecourses.com/blog/component-events-event-emitter-output-angular-2

Пример кода для компонента вывода:

@Output() change = new EventEmitter<number>();