将 svg 作为 prop 传递给角度组件

Question

我正在尝试创建一个动态工具箱组件，并且我希望在工具箱的每个图块上绘制图像的 svg，以便从我传递给工具箱图块组件的这个 svg 字符串中绘制。

<toolbox>
<tile myprop='<rect width="20" height="20" y="7" x="7" stroke="#FFF" stroke-width="2" fill="none" />' />
</toolbox>

我的图块组件模板可能看起来像这样

<div>
<svg>
{{myprop}}
</svg>
</div>

我知道这是行不通的，因为有消毒剂，但我对 Angular 还比较陌生，无法找到访问组件构造函数中的 @Input 属性以使用消毒剂来信任内容的方法。

在 Angular 组件中安全地渲染字符串动态内容的最佳方法是什么，这样我就可以将 svg 逻辑保留在组件模板之外，并在运行时从 JSON 文件加载它？

Answer 1

DomSanitizer.bypassSecurityTrustHtml 返回“SafeHtml”

所以你需要绑定到

[innerHTML]

//your title component.html
<div>
  <svg [innerHTML]="myprop">
  </svg>
</div>

在输入中使用“setter”

export class AppTile {
  myprop!: any;
  @Input('myprop') set _(value: string) {
    this.myprop = this.sanitizer.bypassSecurityTrustHtml(value);
  }
  constructor(private sanitizer: DomSanitizer) {}
}

a stackblitz（注意我使用中风=“红色”，因为“#FFF”是白色的）