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'导入{Pipe,Sanitizer};

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

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

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

并使用它

[innerHTML]="data | safe"

Plunker的例子

另请参见在RC.1中,无法使用绑定语法添加某些样式