Angular 2 SVG不渲染答案

【问题标题】：Angular 2 SVG not renderingAngular 2 SVG不渲染
【发布时间】：2017-04-05 06:17:21
【问题描述】：

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

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

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

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

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

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

谢谢

【问题讨论】：

标签： angular angular2-template angular2-components

【解决方案1】：

Angular 正在清理内容。明确告诉 Angular 它可以信任您的 HTML

从 '@angular/core' 导入 { Pipe, Sanitizer }；

您可以使用可重复使用的管道或直接致电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

另见In RC.1 some styles can't be added using binding syntax

【讨论】：

在你走之前还要感谢一件事。如果我想通过该组件设置 svg 的样式，该怎么做？
我猜你的意思是stackoverflow.com/questions/36265026/…
在较新版本的 Angular 中，您必须使用 DomSanitizer 而不是 Sanitizer 才能使用它

【解决方案2】：

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

【讨论】：