javascript - 使用 DomSanitizer 时 Angular2 停止(单击)工作

Question

我正在使用 Angular2 和 typescript。

我有一个管道可以很好地渲染 HTML。问题是 DomSanitizer 似乎阻止了(点击)事件的工作。

当我检查 console.log (F12) 中的 HTML 时，(点击)代码似乎就在那里并且没有被删除。

但是当我点击链接时它什么也没做。

这是链接的示例(它调用我的组件中的函数):

<a (click)="recordLinkClick()" target="_blank" href="#">Test link</a>

这是管道:

import { Pipe } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe {

  constructor(protected _sanitizer: DomSanitizer) {

  }

  public transform(value: string, type: string = 'html'): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html': return this._sanitizer.bypassSecurityTrustHtml(value);
      case 'style': return this._sanitizer.bypassSecurityTrustStyle(value);
      case 'script': return this._sanitizer.bypassSecurityTrustScript(value);
      case 'url': return this._sanitizer.bypassSecurityTrustUrl(value);
      case 'resourceUrl': return this._sanitizer.bypassSecurityTrustResourceUrl(value);
      default: throw new Error(`Invalid safe type specified: ${type}`);
    }
  }

}

这是 HTML 行:

<div [innerHTML]="selectedArticle.body | safe: 'html'"></div>   

如果您需要查看更多代码，请告诉我。

Answer 1

<a (click)="recordLinkClick()" target="_blank" href="#">Test link</a>

如果您希望通过 innerHTML 放置此 anchor ，则在将其放入 html 之前，如果您没有编译 html，则 Angular 将不会注册它。 DOM。

这里介绍了为 Angular 2 动态编译 html 的步骤:How can I use/create dynamic template to compile dynamic Component with Angular 2.0?