logo标签列表

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

angular
38
我有一个普通的绑定，像这样{{foo}}，它将foo的值作为文本显示在HTML中。从服务器传来的文本是"R&D"。我需要它显示为"R&D"。 有什么帮助吗？
1
可能是 angular 2 html 绑定 的重复问题。 - Vega
8个回答
44
29

如果想要更加有趣和灵活一些，您可以创建一个解析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}}
2
我建议这是更好的答案，因为我需要解析一些HTML实体在“title”属性中，而innerHTML不是答案。创建一个自定义管道并使用它解决了我的问题。 - Chris Coppenbarger
1
这对我来说更好，我需要将HTML解码为输入占位符属性。 - joepa37
1
使用这个和被接受的答案的混合方法...在可能的情况下直接设置innerHTML，其他情况下使用管道是有意义的。 - ironic_ollins
应该使用 innerHTML 而不是 innerText，这样我们可以解码特殊字符并保留现有的 HTML 格式。 - Imants Volkovs
@ImantsVolkovs，除非我误解了你的意思，否则这并不能解码特殊字符。如果您将innerHTML设置为R&D并返回innerHTML，则仍然会返回R&D而不是R＆D。 - John Montgomery
显示剩余3条评论
15

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

对于'&'符号，那将是U+0026：

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

1
这是我在某些情况下有效的唯一方法。 - Milo
5
您可以像这样使用innerHTML：
 <span [innerHTML]= "foo"></span>

它会正确解码。
5

虽然使用innerHTML可以完成任务，但它会打断当前行，并在新行中显示div（如果您选择使用div）。相反，使用outerHTML。它会在您使用的同一位置添加foo的值。

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

使用innerHTML时，span是更好的选择。
4

您也可以尝试像这样绑定 {{"\u0026"}}

这样做更好，因为它在{{ }}中起作用。谢谢！ - Derek Liang
0
0
基于被接受的答案，我制作了一个示例用于展示。我分享给关心此事的人。
TS file
    export class AppComponent  {
      cubicSymbol = 'm&sup2;';
    }
HTML file
    <h2>Symbol: <span [innerHTML]="cubicSymbol"></span></h2>

https://stackblitz.com/edit/angular-display-symbols

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接