使用 Angular 2 渲染 SVG 数据

Question

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

方法一：

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

此方法仅呈现 svg 图像中的文本

方法2：

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

此方法将所有 svg 标签和数据吐出为大量字符串(如预期的那样(

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

Answer 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);
}

<div class="prodStruc" [innerHtml]="myImage"> </div>

然后在您的模板中：