javascript - document.getElementsByClassName 实时 html 集合上的 Angular 6 单击事件

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 中加载实时集合后，如何向元素数组中的每个元素添加点击事件监听器？有没有办法让集合成为可观察的？

谢谢

Answer 1

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

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