使用 Angular 2 渲染 SVG 数据答案

【问题标题】：Rendering SVG data using Angular 2使用 Angular 2 渲染 SVG 数据
【发布时间】：2017-08-08 00:19:20
【问题描述】：

我有一个 Angular 应用程序，它从服务获取产品信息并将其返回到 json 对象中。在 html 模板上，我想在页面上显示这个 SVG 图像。我尝试了几种不同的方法，但无法渲染图像。

方法一：

<div class="prodStruc" [innerHtml]="product?.StructureSVG" style="float:right">

此方法仅渲染 svg 图片中的文本

方法二：

<div class="prodStruc" style="float:right">            
      {{product?.StructureSVG}}
    </div>

此方法将所有 svg 标签和数据作为一个大字符串吐出（如预期的那样）

谁能指出我如何做到这一点的正确方向..如果可以做到吗？

【问题讨论】：

标签： angular svg data-binding

【解决方案1】：

我也遇到了同样的问题。这是解决方案：

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

// inject DomSanitizer in constructor
private myImage: SafeHtml;

constructor(private sanitizer: DomSanitizer) {
  this.myImage = sanitizer.bypassSecurityTrustHtml(product.StructureSVG);
}

&lt;div class="prodStruc" [innerHtml]="myImage"&gt; &lt;/div&gt;

然后在你的模板中：

【讨论】：