Angular 2：如何在不向用户显示标签的情况下从 JSON 响应呈现 HTML？ [复制]

Posted 2023-02-22

【中文标题】Angular 2：如何在不向用户显示标签的情况下从 JSON 响应呈现 HTML？ [复制]

【英文标题】：Angular 2: How do you render HTML from a JSON response without displaying the tags to the user? [duplicate]

【发布时间】：2016-04-28 10:09:06

【问题描述】：

编辑：澄清一下，我的问题是关于 Angular 2，而不是 1。

---

我有一个类似这样的组件模板：

<div> post.body </div>

对象是这样的：

    "title": "Some Title",
    "body": "<p>The <em>post body</em>.</p>"

而不是像这样渲染段落：

帖子正文

它显示：

"<p>The <em>post body</em>.</p>"

由于这是一项常见的任务，我寻找了一个像 post.body | safe 这样的内置管道，但没有找到。

有没有一种简单的方法可以让它发挥作用？有没有一种安全的方法可以让它发挥作用？

【问题讨论】：

你用什么把 json 添加到你的页面中？

请参阅：***.com/questions/17826758/… 和/或***.com/questions/23747474/…

或***.com/questions/20436579/…，或google.com

<div [innerhtml]="post.body"></div> 用于 Angular2...

@PhiterFernandes - JSON 来自一个服务，该服务目前从模拟数据中获取它，类似于 angular.io 教程中的做法。

【参考方案1】：

在 Angular2 中，您可以使用 property binding 访问 DOM 元素的属性，在您的情况下：

<div [innerHTML]="post.body"></div>

【讨论】：

但你不应该那样做angular.io/docs/ts/latest/guide/security.html#!#xss

@CSchulz 那么安全的方法应该是什么

只有在确定来源可信时才应该这样做。

如果您在 Angular 4 中使用 [innerHTML]="yourHtml" 绑定到 html，它将清理字符串并删除任何

@ibgib 是的，你不再需要它了，Angular 现在默认清理 html 内容：angular.io/guide/security#sanitization-and-security-contexts