时间戳

首页 > 解决方案 > Angular 5：显示来自服务器响应的 html 和 xml

angular - Angular 5：显示来自服务器响应的 html 和 xml

问题描述

我有一个场景，我需要从服务器发送的相同字符串中显示 html 和 xml。

来自服务器的回复如下所示：

This is sample text with <b>bold text</b> and also some xml like this <note><to>you</to><from>me</from><heading>title</heading><body>message</body></note>. As you can see it contains both xml to display and html to render.

我试过了：

text;
msg = 'This is sample text with <b>bold text</b> and also some xml like this <note><to>you</to><from>me</from><heading>title</heading><body>message</body></note>. As you can see it contains both xml to display and html to render.'

constructor(private domSanitizer: DomSanitizer) {
}

ngOnInit() {
    this.text = this.getInnerHTMLValue();
}

getInnerHTMLValue() {
    return this.domSanitizer.bypassSecurityTrustHtml(this.msg);
}

html:

<pre [innerText]="text"></pre>

我收到此错误：

SafeValue must use [property]=binding:...

而当我使用[innerHTML]而不是[innerText]xml时已经被清除了。

如何显示示例 xml 代码以及解析 html 标签（如<b>标签）？至少我怎样才能摆脱这个错误？

标签： angularxssangular-dom-sanitizer

解决方案

恐怕这不可能。看看WC3 规格：

用户代理必须将他们不理解的元素和属性视为语义中立的；将它们留在 DOM 中（对于 DOM 处理器），并根据 CSS 设置它们的样式（对于 CSS 处理器），但不会从中推断出任何含义。

这意味着，尽管您的浏览器不知道这些元素，但它们将成为 dom 的一部分，因此不会显示在文本中。

您唯一的解决方案将是自己编码除<b>, <i>,... 之外的所有标签：<note>->&#x3C;note&#x3E;或使用诸如降价之类的东西进行格式化。

作为最简单的解决方法，只需msg按原样使用而不进行消毒：

<pre>{{msg}}</pre>

由于它不会被解释，因此不需要进行消毒。（当然，类似的标签<b>也不会被解释。）

推荐阅读