我有一个 Angular 应用程序,它从服务获取产品信息并将其返回到 json 对象中。在 html 模板上,我想在页面上显示此 SVG 图像。我尝试了几种不同的方法,但我无法获得任何渲染图像的方法。
方法一:
<div class="prodStruc" [innerHtml]="product?.StructureSVG" style="float:right">
此方法只渲染 svg 图像中的文本
方法二:
<div class="prodStruc" style="float:right">
{{product?.StructureSVG}}
</div>
此方法将所有 svg 标签和数据吐出为一个巨大的字符串(如预期的那样)
任何人都可以指出正确的方向,告诉我如何做到这一点......如果可以做到的话?
最佳答案
我刚刚遇到了同样的问题。这是解决方案:
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>
然后在你的模板中:
关于angular - 使用 Angular 2 渲染 SVG 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42840618/