Angular 2を使用してSVGデータをレンダリングする

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>

そして：