在Angular 2绑定中显示HTML特殊字符？

Question

我有这样的普通绑定{{foo}},它在HTML中显示foo的值作为文本.来自服务器的文本是"R&D".我需要这个显示为"R&D".有帮助吗？

Answer 1

{{}} 用于字符串绑定.

使用属性绑定来innerHTML正确显示这些字符.

<div [innerHTML]="foo">

有关详细信息,请参阅/sf/answers/2876236541/.

Answer 2

为了更有趣和灵活,您可以创建一个解析HTML实体的管道:

@Pipe({name: "decodeHtmlString"})
export class DecodeHtmlString implements PipeTransform {
    transform(value: string) {
        const tempElement = document.createElement("div")
        tempElement.innerHTML = value
        return tempElement.innerText
    }
}

{{foo | decodeHtmlString}}

Answer 3

如果您不想使用[innerHTML]，则可以使用unicode字符串字符（如果您在项目中使用unicode字符串）。

对于“＆”符号，它将是U + 0026：

<div>{{"R\u0026D"}}</div>

Answer 4

你可以像这样使用innerHTML：

 <span [innerHTML]= "foo"></span>

它将正确解码

Answer 5

虽然innerHTML可以使用，但它会折行并div显示在新行中（如果div是您更喜欢使用的格式）。使用outerHTML代替。它将foo在使用它的位置添加的值。

<div [outerHTML]="foo"> </div>

使用innerHTML，跨度是更好的选择。