渲染SVG數據角2

我具有有角的應用程序，從服務獲取的產品信息和在JSON對象返回它。在html模板上，我想在頁面上顯示這個SVG圖像。我已經嘗試了幾種不同的方法，但我無法得到任何渲染圖像。渲染SVG數據角2

方法1：

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

此方法僅呈現從SVG圖像文本

方法2：

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

此方法吐出所有SVG標籤和數據作爲大量的字符串（如預期）

任何人都可以點我就如何正確的方向做到這一點..如果可以做到這一點？

來源

2017-03-16 Darren Mitchinson

我有同樣的問題。這是解決方案：

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>

，然後在模板：

來源

2017-05-18 11:06:18 Fabi

渲染SVG數據角2

回答

相關問題