Angular 2 SVG not rendering

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

导入{pipe，sanitizer}来自'@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示例

另请参见RC.1中的某些样式无法使用绑定语法

Answer 2

我只想添加到GünterZöchbauer的接受答案中，在较新的Angular版本中，我们需要使用DomSanitizer而不是Sanitizer，可以使用import { DomSanitizer } from '@angular/platform-browser';导入。

。