Angular 2 - 使用 [innerHTML] 时剥离点击功能

Question

我必须使用模板上的 [innerHTML] 标签通过 typescript 输入一些 html。

我正在尝试在 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

如果您使用 [innerHTML]，Angular 会删除 所有 Angular 特定的内容。

如果您需要类似的东西，您可以在运行时创建组件，如 Equivalent of $compile in 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);
}