离子：点击事件侦听器无法附加到经过清理的HTML

Question

在article.body中，我正在渲染一个包含一些单词和一些跨度的文本：

<div class="body" [innerHTML]="article.body"></div>  

<!-- Renders this: --> 
<div class="body">
  Lorem ipsum 
  <span class="note" data-word="random1">lorem</span> ipsum
  <span class="note" data-word="random2">lorem</span> ipsum
  <span class="note" data-word="random99">lorem</span> infinite
</div>

但是，默认情况下，Ionic会删除所有数据属性，呈现跨度为<span class="note">any word</span>。

要解决该问题，我必须包括并使用DomSanitizer，它可以解决该问题，使我可以根据需要保留数据属性：

<div class="body" [innerHTML]="domSanitizer.bypassSecurityTrustHtml(article.body)"></div>

不过，当我将每个带有span的点击事件侦听器附加到每个clickNotes function时，就会出现问题。由于某些原因，如果我没有对article.body进行清理，则只能附加一个点击侦听器。

// Clicking span children from this works
<div class="body" [innerHTML]="article.body"></div>

// Clicking span children from this doesn't work
<div class="body" [innerHTML]="domSanitizer.bypassSecurityTrustHtml(article.body)"></div>

我犯错了吗？以下是我的ts文件的代码。

import { DomSanitizer } from '@angular/platform-browser';
export class MyPage {

  constructor(public domSanitizer: DomSanitizer) {}

  ionViewDidLoad() {
     this.clickNotes();
  }

  clickNotes() {
     let notes = document.querySelectorAll('.note');

     for (var i = 0; i < notes.length; i++) {
        notes[i].addEventListener('click', () => { 
          alert('e');
        }, true);
     }
  }
}