Angular 2: How do you render HTML from a JSON response without displaying the tags to the user?
编辑:澄清任何只略读标题的人,我的问题是关于角度2,而不是1。
我有一个类似这样的组件模板:
对象类似于:
1 2 3 4 5 6
| {
"title":"Some Title",
"body":"<p>
The post body.
</p>"
} |
号
而不是将段落呈现为:
柱体
它显示:
"
The post body.
"。
因为这是一项很常见的任务,所以我找了一个类似于{{ post.body | safe }}的内置管道,但没有看到。
有没有一个简单的方法让它工作?有没有一个安全的方法让它工作?
- 您使用什么将JSON添加到页面中?
- 请参见:stackoverflow.com/questions/17826758/&hellip;和/或stackoverflow.com/questions/237474/&hellip;
- 或stackoverflow.com/questions/20436579/&hellip;,或google.com
- 角2的</div>…
- @Phiterfernandes——JSON来自一个服务,该服务目前从模拟数据中获取它,类似于Angular.io教程中的做法。
- 那是这个问题的副本。
在Angular2中,可以使用属性绑定访问dom元素的属性,在这种情况下:
- 但你不应该这么做。io/docs/ts/latest/guide/security.html!XSS
- @那么,CSchulz应该采用什么样的安全方法来实现呢?
- 只有在您确定源是可信的情况下才应该这样做。
- 我想在HTML中附加内容,而不是替换innerhtml。到目前为止还没有找到解决方案。
- 如果使用角4中的[innerHTML]="yourHtml"绑定到HTML,它将清理字符串并删除任何标记:angular.io/guide/security清理和安全上下文
- 如何使用其他标签,如
在分区里面?
- @Cascadiajs感谢您提供安全链接。这是否意味着不需要另一根柱子(stackoverflow.com/a/41089093/4275029)中的safeHtml管道?
- @你不再需要它了,Angular现在默认清理HTML内容:angular.io/guide/security清理和安全上下文
- 如果需要使用按钮或脚本,则通过domSanitizer.bypassSecurityTrustHTML传递HTML(注意,HTML必须来自可信源)