【问题标题】:Passing innerHtml with inline styles (Angular 10)使用内联样式传递 innerHtml (Angular 10)
【发布时间】:2021-07-15 17:30:55
【问题描述】:

我正在尝试将带有内联样式的 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>

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

【问题讨论】:

    标签: html angular typescript


    【解决方案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 最终来自用户输入,那么这应该非常明智地完成,因为用户可以利用它向您的应用程序注入不安全的代码。

    【讨论】:

    • 我有同样的错误。但我的内容是从 api 获取的。我该如何处理。
    • @azhar,你需要展示一些代码。这也应该适合你。
    猜你喜欢
    • 2016-07-15
    • 1970-01-01
    • 2019-12-21
    • 1970-01-01
    • 2018-09-01
    • 1970-01-01
    • 1970-01-01
    • 2021-08-18
    • 2018-10-15
    相关资源
    最近更新 更多