Ionic: слушатель события щелчка не может быть присоединен к очищенному HTML - PullRequest
Новая
       54

Ionic: слушатель события щелчка не может быть присоединен к очищенному HTML

0 голосов
/ 27 ноября 2018

Из 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);
     }
  }
}
...