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)

。

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({ name: 'bypassHtmlSanitizer' })
export class BypassHtmlSanitizerPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

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

并像这样使用它

[innerHTML]="data | bypassHtmlSanitizer"

Plunker 示例

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

Answer 2

我只想补充 Günter Zöchbauer 已接受的答案，即在较新版本的 Angular 中，我们需要使用

DomSanitizer

而不是

Sanitizer

，可以使用

import { DomSanitizer } from '@angular/platform-browser';

导入。