Angular 2 - удаление функции щелчка при использовании [innerHTML]

Question

Я должен ввести html через машинопись, используя тег [innerHTML] на шаблоне.

Я пытаюсь поставить функцию щелчка на HTML:

status = "<img src='assets/hello.png' (click)='hello()' />";

Но функция щелчка удаляется с консоли, говоря:

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

Я вижу, что несколько человек упоминали об использовании "DomSanitizer", но не могу найти пример, который решает мою точную проблему.

Answer 1

Angular удаляет все особенности Angular, если вы используете [innerHTML],

Если вам нужно что-то подобное, вы можете создавать компоненты во время выполнения, как описано в Equivalent of $compile в Angular 2
или вы можете использовать императивный код, чтобы добавить обработчик событий, как

constructor(private elRef:ElementRef, private cdRef:ChangeDetectorRef) {}

someMethod() {
  this.status = "<img src='assets/hello.png' (click)='hello()' />";
  this.cdRef.detectChanges();
  this.elRef.nativeElement.querySelector('img').addEventListener('click', this.hello.bind(this);
}