使用Angular 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

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

＆＃13;

＆＃13;

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

// inject DomSanitizer in constructor
private myImage: SafeHtml;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

然后在你的模板中：