Angular 2 - 使用[innerHTML]时删除点击功能

Question

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

我想在html上放一个click函数:

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].

如果您需要类似的东西,您可以在运行时创建组件,如Angular 2中的等效$ compile中所述,
或者您可以使用命令式代码添加事件处理程序,如

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);
}