如何将点击事件附加到 Angular 7+ 中的插件添加到 DOM 的元素？

Question

我正在使用 VMWareClarity 模块向页面添加数据网格。作为这个数据网格的一部分，有一个按钮可以在网格上打开一个弹出窗口到 select 哪些列到 hide/show。列 selected 后，可以通过单击关闭按钮关闭弹出窗口。

我需要将一个动作附加到弹出窗口中的关闭按钮，但我无法访问该元素以单击它，因为它仅在我单击 DOM 后呈现在 DOM 中21=] 列按钮。我尝试在 ngAfterViewInit、changeDetection 和 @HostListener 中添加 elementRef.nativeElement.querySelector，但是 none 能够找到加载到 [=22 中的新弹出元素=].

Answer 1

您是否检查过目标元素的父节点？通常在 Body 标签的最高 DOM 级别上创建弹出窗口（取决于您的 UI 框架）。否则，您仍然可以实现如下所示的 Output() EventEmitter：https://ultimatecourses.com/blog/component-events-event-emitter-output-angular-2

输出组件的示例代码：

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

Answer 2

在这种情况下，我能够在文档上使用 HostListener，然后跟踪事件目标 nodeName 是否是我正在寻找的元素（因为每个元素都有一个 nodeName）：

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

如何将点击事件附加到 Angular 7+ 中的插件添加到 DOM 的元素？

How can I attach a click event to an element added to the DOM by a plugin in Angular 7+?

events

dom-events

onclicklistener

angular

vmware-clarity