Angular 2 - 使用 [innerHTML] 时去除点击功能答案

【问题标题】：Angular 2 - Stripping out click function when using [innerHTML]Angular 2 - 使用 [innerHTML] 时去除点击功能
【发布时间】：2017-09-14 03:01:33
【问题描述】：

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

我正在尝试在 html 上添加点击功能：

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

但是点击功能被控制台剥夺了：

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

我看到一些人提到使用“DomSanitizer”，但找不到可以解决我确切问题的示例。

【问题讨论】：

标签： angular typescript

【解决方案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);
}

【讨论】：

感谢您的回答。我收到错误“'ElementRef' 类型上不存在属性 'querySelector'。
对不起，我错过了nativeElement.
谢谢。但是，如果我要将一个对象传递给我的 'hello' 函数，我不能通过字符串方式将对象传递给我吗？
什么对象？你可以....addEventListener('click', (evt) => this.hello(evt, this.someObject);
谢谢 :) 我刚刚尝试了所有方法，但它显示“例外：无法读取属性 'addEventListener' of null”