如何在Angular 4+中使用HTML标签渲染字符串？

Question

在我的Angular 4应用中，我有一个字符串，例如

comment: string;
comment = "<p><em><strong>abc</strong></em></p>";

当我在我的html中渲染这段文字，像这样：

...

{{comment}}

然后它显示：

<p><em><strong>abc</strong></em></p>

但是我需要以加粗和斜体的形式显示文本“abc”，就像abc一样。

我该怎么做呢？

- Shams Nahid

Answer 1

使用单向数据流语法属性绑定：

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

来自Angular文档："Angular将该值识别为不安全，并自动进行了净化处理，删除了<script>标签，但保留了安全内容，如<b>元素。"

- Haifeng Zhang

---

在Angular前端中，使用[innerHTML]可能导致安全漏洞，因此应禁止使用。https://angular.io/guide/security。 - Hong Nguyen

据我理解，你分享的那篇文章说明使用[innerHTML]更安全。可以查看实时示例。 - Manoj De Mel

来自 Angular 文档 的信息： "Angular 将值([innerHtml])识别为不安全的并进行自动清理，这会删除<script>标签，但保留安全内容，如<b>元素。" - coderatchet

这有一个缺点：它不会将CSS样式应用于组件CSS中的标签。 - albanx

@albanx 你可以通过在你的组件中添加“encapsulation: ViewEncapsulation.None”来添加CSS样式。更多信息请参考：https://dev59.com/eVcP5IYBdhLWcg3wkKpD - AylaWinters