Angular 2 SVG 未渲染

Question

我创建了一个组件来渲染我的应用程序中的 SVG 图像。

它们是动态加载的，但是，我的演示应用程序只显示了一个更简单的版本。

http://plnkr.co/edit/g2tZXeUAMJ5zESx2EHT0?p=info

我尝试了 <div [innerHTML]="data"></div> 和 <div> {{ data }} </div>

尽管调用正确，但未加载 SVG。我花了一些时间在 gitter 上寻找解决方案，但我得到的最接近的是它正在被清理。

我假设的 innerHTML 正在被清理并且插值被忽略。它只显示原始 svg 文本。

谢谢

Answer 1

Angular 正在清理内容。要解决此问题，请明确告诉 Angular 它可以信任您的 HTML

从“@angular/core”导入{管道、消毒剂}；

您可以使用可重复使用的管道或直接调用 sanitizer.bypassSecurityTrustHtml(html)。

@Pipe({name: 'safe'})
export class SafeHtml {
  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

并像

一样使用它

[innerHTML]="data | safe"

Plunker example

另见

Answer 2

我只想补充 Günter Zöchbauer 接受的答案，在 Angular 的较新版本中，我们需要使用 DomSanitizer 而不是 Sanitizer，可以使用import { DomSanitizer } from '@angular/platform-browser';.

Angular 2 SVG 未渲染

Angular 2 SVG not rendering

angular2-template

angular2-components

angular