如何在Angular 4+中使用html标签呈现字符串？

Question

在我的角度4应用程序中,我有一个字符串

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

当我在我的HTML中提供这个文本时,就像

{{comment}}

然后它显示:

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

但我需要以粗体和斜体形式显示文本"abc",如 abc

我怎样才能做到这一点？

Answer 1

我在Angular 5.0项目中使用了以下内容:

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

这有一个缺点：它不会将 css 样式应用于组件 css 中的标签 (7认同)
仅供参考，从angular [docs]（https://angular.io/guide/security）：“ Angular将值（`[innerHtml]`）识别为不安全并自动清除它，从而删除了<script>标记，但保留了安全内容例如<b>元素。” (5认同)
@HongNguyen据我所知,我认为您分享的文章解释说使用[innerHTML]更安全.查看实例. (4认同)
得到它了.有用. (3认同)
@albanx，您可以通过向组件添加“encapsulation: ViewEncapsulation.None”来添加 css 样式。更多信息在这里：/sf/ask/3094755051/ (3认同)
在Angular前端中，使用[innerHTML]可能会导致安全错误，因此应禁止使用。https://angular.io/guide/security。 (2认同)