Angular 2 SVG不渲染

Posted 2023-05-07

【中文标题】Angular 2 SVG不渲染

【英文标题】：Angular 2 SVG not rendering

【发布时间】：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 文本。

谢谢

【参考方案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 的样式，该怎么做？

我猜你的意思是***.com/questions/36265026/…

在较新版本的 Angular 中，您必须使用 DomSanitizer 而不是 Sanitizer 才能使用它

【参考方案2】：

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