我有一个普通的绑定,像这样
{{foo}}
,它将foo的值作为文本显示在HTML中。从服务器传来的文本是"R&D"
。我需要它显示为"R&D"。 有什么帮助吗?{{foo}}
,它将foo的值作为文本显示在HTML中。从服务器传来的文本是"R&D"
。我需要它显示为"R&D"。 有什么帮助吗?{{}}
是用于字符串绑定的。
使用属性绑定到innerHTML
,以正确显示这些字符。
<div [innerHTML]="foo">
如果想要更加有趣和灵活一些,您可以创建一个解析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}}
innerHTML
而不是 innerText
,这样我们可以解码特殊字符并保留现有的 HTML 格式。 - Imants VolkovsinnerHTML
设置为R&D
并返回innerHTML
,则仍然会返回R&D
而不是R&D
。 - John Montgomery如果您不想使用[innerHTML]
,可以使用unicode字符串字符(如果您的项目中使用了unicode字符串)。
对于'&'符号,那将是U+0026:
<div>{{"R\u0026D"}}</div>
<span [innerHTML]= "foo"></span>
虽然使用innerHTML
可以完成任务,但它会打断当前行,并在新行中显示div
(如果您选择使用div
)。相反,使用outerHTML
。它会在您使用的同一位置添加foo
的值。
<div [outerHTML]="foo"> </div>
您也可以尝试像这样绑定 {{"\u0026"}}
你可以使用十六进制代码替换重音字符(参考:HTML和JavaScript中的重音字符和连字符),而不是使用 [innerHTML]。
例如,"R&D" 可以保存为 "R\x26D"。
这样你就可以使用普通绑定了。
TS file
export class AppComponent {
cubicSymbol = 'm²';
}
HTML file
<h2>Symbol: <span [innerHTML]="cubicSymbol"></span></h2>