使用innerHtml在div中显示HTML字符串

Question

我需要使用 div 显示原始 HTML 字符串。我将 HTML 字符串赋值给 div 的 innerHTML，如下所示：

<div [innerHTML]="rawHTMLString">
</div>

然而，如果HTML字符串包含多行注释或内联样式，它们也会被显示为文本。在Stack Blitz上查看此问题here。

期望的功能是不显示注释和内联样式块。这是应该呈现的方式。

预期结果

所有之前在Stack Overflow上的答案都指向使用div innerHTML。我知道我在这里错过了一些微不足道的东西，但我似乎无法弄清楚。提前感谢您的帮助。

- Alvin Saldanha

---

你是在动态加载/提供字符串吗？也就是说，你无法直接控制字符串的内容？ - nemanja

你可以尝试对HTML字符串进行清理，具体做法如this answer所述。 - ConnorsFan

是的。该字符串是由第三方服务器自动生成的，因此无法控制字符串的生成。 - Alvin Saldanha

谢谢@ConnorsFan。运行得非常顺利！ - Alvin Saldanha

Answer 1

Use DomSanitizer

  safeHtml(html) {
    return this._sanitizer.bypassSecurityTrustHtml(html);
  }

在模板中，

  <div [innerHTML]="safeHtml(rawHTMLString)"></div>

STACKBLITZ DEMO

- Sajeetharan