我有一个带有角度前端和 C# 后端的应用程序。我从我的应用程序的后端收到这个富文本:
<b>Hello <span style="font-weight:normal"> world </span></b>
显示的是“ Hello world ”
我想要显示的是“ Hello world”
期望的行为是跨度的样式不会被覆盖。此 codepen 示例显示了所需的行为,但它仅是前端: https ://codepen.io/david-lo/pen/rNVOEbY
我错过了什么?
我有一个带有角度前端和 C# 后端的应用程序。我从我的应用程序的后端收到这个富文本:
<b>Hello <span style="font-weight:normal"> world </span></b>
显示的是“ Hello world ”
我想要显示的是“ Hello world”
期望的行为是跨度的样式不会被覆盖。此 codepen 示例显示了所需的行为,但它仅是前端: https ://codepen.io/david-lo/pen/rNVOEbY
我错过了什么?
我通过使用SafeHtml和DomSanitizer解决了我的问题:
前:
public txt: string; //txt is rendered in my html file.
@Input() public set header(_txt: string) {
this.txt = _txt;
}
字符串输入_txt
有值<b>Hello <span style="font-weight:normal"> world </span></b>
问题是我的跨度样式被忽略了,所以输出将是:
你好世界
后:
public txt: SafeHtml;
@Input() public set header(_txt: string) {
this.txt= this.domSanitizer.bypassSecurityTrustHtml(_txt);
}
通过以上面显示的方式使用 DomSanitizer,我的 span 样式在前端得到了尊重,并且我实现了所需的输出:
你好世界
请在css下面添加
p {margin: auto; display: inline-block;}
如果您尝试使用反斜杠符号呈现该代码,这显然是不正确的 HTML。
正确的行应如下所示:
<b>Hello <span style="font-weight:normal"> world </span></b>