在Angular 2綁定中顯示HTML特殊字符？

我有一個像這樣的普通綁定{{foo}}，它將foo的值顯示爲HTML中的文本。來自服務器的文本是"R&D"。我需要這個顯示爲「R & D」。任何幫助？在Angular 2綁定中顯示HTML特殊字符？

2017-08-24 David

的可能的複製[角2的HTML結合]（https://stackoverflow.com/questions/31548311/angular- 2-html-binding） – Vega

{{}}用於字符串綁定。

使用屬性綁定到innerHTML而不是使這些字符正確顯示。

<div [innerHTML]="foo">

來源

2017-08-24 15:54:13

可以使用的innerHTML這樣的：

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

將解碼正確

來源

2017-08-24 15:58:05

對於多一點樂趣和靈活性，您可以創建一個解析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}}

來源

2017-08-24 16:02:15

我會建議這是一個更好的答案，因爲我需要解析一些HTML標記，而這些標記的innerHTML不是答案。創建一個自定義管道並使用它來解決我的問題。 –

雖然innerHTML將工作，它將打破這一行，div將顯示在新行（如果div是你喜歡使用的）。改爲使用outerHTML。它會在您使用它的相同位置添加foo的值。

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

隨着innerHTML，跨度是一個更好的選擇。

來源

2017-08-24 16:03:36 Faisal

-1

你可以試試這個。

<div [innerHTML]="R&amp;D"></div>

綁定你的模型像

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

來源

2017-08-24 16:19:21

如果你不想使用[innerHTML]，你可以使用unicode字符串中的字符（如果你在項目中使用unicode字符串）。

對於 '&' 符號，這將是U + 0026：

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

來源

2017-10-26 16:26:31 dukeluke

在Angular 2綁定中顯示HTML特殊字符？

回答

相關問題