Question

我使用Angular2和打字稿。

我有一个关于渲染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加入，那么会在没有你编译 html之前注册它，然后再将它放入DOM中。

动态编译角度2的html的步骤在此处介绍：How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

使用DomSanitizer时，Angular2停止（单击）工作

1 个答案: