Angular2 - catch/subscribe to (click) событие в динамическом добавлении HTML

Question

Я пытаюсь ввести строку, содержащую событие (click) в шаблон Angular2. Строка динамически извлекается из back-end намного после загрузки DOM. Нет ничего удивительного в том, что Angular не распознает введенное событие (click).

Пример шаблона:

<div [innerHTML]="test"></div> 

Пример строка, заданная с фоновым:

var test = "When ready, <span (click)=\"itemClick($event)\">click me</span>." 

Пример вызова функции в угловых компонент:

itemClick(event) { 
    debugger; 
} 

---

Моя следующая догадка бы попытаться заставить Angular подписаться или поймать простой jav ascript события, поэтому строка затем будет:

var test = "When ready, <span onClick=\"itemClick($event)\">click me</span>." 

Конечно, я получаю сообщение об ошибке itemClick is not defined, так что я знаю, что ищет что яваскрипт функцию.

Итак, вопрос: Как я могу заставить Angular2 подписаться на это событие или функцию?

Answer 1

Декларативное связывание событий поддерживается только в статическом HTML в шаблоне компонентов.
Если вы хотите подписаться на события динамически добавленных элементов, вам нужно сделать это императивно.

elementRef.nativeElement.querySelector(...).addEventListener(...) 

или аналогичный.

Если вы хотите быть WebWorker безопасным, вы можете вводить Renderer

constructor(private elementRef:ElementRef, private renderer:Renderer) {} 

и использовать вместо

this.renderer.listen(this.elementRef.nativeElement, 'click', (event) => { handleClick(event);}); 

зарегистрировать обработчик событий.

см. Также Dynamically add event listener in Angular 2