渲染SVG数据角2

Question

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

方法1：

<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>

，然后在模板：