Angular 6单击document.getElementsByClassName live html集合上的事件

Question

我有一个[innerHtml]，其中有几个我想向其中添加点击事件的类：

...

inner = server.getInnerHtml();

ngAfterViewInit(){
  var els = document.getElementsByClassName("highlight"); //I want all the html elements with class ".highlight"
  console.log(els.length); //its 0!!!
  Array.from(els).forEach( el =>{
    console.log(el)
  });
  console.log(els); //this prints fine, i guess since live collection
}

<div [innerHtml]="inner | safeHtml"></div>

一旦实时集合加载到Angular中后，如何将click事件侦听器添加到elements数组中的每个元素？有什么办法可以使集合成为可观察的？

谢谢

Answer 1

这是侦听document.element包含类名“ highlight”的click事件的stackblitz代码。

https://stackblitz.com/edit/angular-jgeapi