使用内联样式传递 innerHtml (Angular 10)

Question

我正在尝试将带有内联样式的 html 作为变量传递给角度组件。

var htmlValue = "<div style="margin-left: 13px; font-size: large;" fxLayout="column" fxLayoutAlign="center start">
    Need Help?
  </div>"

但是在渲染组件上的代码时，内联样式被删除了。

<div [innerHtml]="htmlValue"></div>

呈现为：

<div>
  <div>
    Need Help?
  </div>"
</div>

有没有办法阻止这种情况发生

Answer 1

您需要使用DomSanitizer。在构造函数中注入消毒剂后，您的 htmlValue 分配将更新为以下内容。

var htmlValue = this.sanitizer
    .bypassSecurityTrustHtml("<div style="margin-left: 13px; font-size: large;" fxLayout="column" fxLayoutAlign="center start">
    Need Help?
  </div>")

工作StackBlitz 示例。

警告

Angular 剥离样式等最初是出于安全考虑，因此请谨慎操作。仅当您可以信任所注入的 html 时才应使用此选项。如果 html 最终来自用户输入，那么这应该非常明智地完成，因为用户可以利用它向您的应用程序注入不安全的代码。