后端无法解析样式

Question

5

我可以帮您进行翻译。这段内容是关于一个具有Angular前端和C#后端的应用程序的，而且您从应用程序的后端接收到了富文本内容。

<b>Hello <span style="font-weight:normal"> world </span></b>

显示的内容是 "Hello world"
我想要显示的内容是 "Hello world"

期望的行为是 span 的样式不被覆盖。这个 CodePen 示例展示了期望的行为，但它仅适用于前端： https://codepen.io/david-lo/pen/rNVOEbY

我错过了什么？

- DLO

请尝试使用以下代码：Hello world 。 - Aman Gojariya

@David Lo 尝试这样写 "你好 世界" - Husna

@AmanGojariya编辑了问题，对于误解我很抱歉。 - DLO

@DavidLo，你的 CodePen 示例代码已经成功运行。 - Aman Gojariya

@AmanGojariya 是的，这个 CodePen 展示了当我从后端接收到富文本时想要的结果（但实际上并没有按照预期工作）。 - DLO

3个回答

1

请添加以下 CSS。

p {margin: auto; display: inline-block;}

- Mehul Davara

谢谢，这让我的codepen示例输出只显示在一行上，例如： Hello<\b> world。但这不是我的主要问题。 - DLO

1

如果您试图使用反斜杠符号呈现该代码，则这显然是不正确的HTML。
正确的行应该像这样：

<b>Hello <span style="font-weight:normal"> world </span></b>

- Dimitar Spassov

问题在于我从后端发送它时使用了引号，但在前端接收到的方式是你所显示的方式。我明白这个问题可能会误导人，所以我会进行编辑。 - DLO

那我建议您在浏览器开发工具中检查该特定元素。span的字体粗细是否被带有“！important”标志的规则覆盖？如果没有，请检查您使用的字体 - 是否支持不同的字体粗细？ - Dimitar Spassov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DLO · Accepted Answer

我通过使用SafeHtml和DomSanitizer解决了我的问题：

之前的代码：

  public txt: string; //txt is rendered in my html file. 
  @Input() public set header(_txt: string) {
    this.txt = _txt;
  }

字符串输入_txt的值为Hello world 

问题在于我的样式被忽略了，所以输出结果是:

Hello world

修改后:

  public txt: SafeHtml;
  @Input() public set header(_txt: string) {
    this.txt= this.domSanitizer.bypassSecurityTrustHtml(_txt);
  }

通过以上展示的使用DomSanitizer的方式，我的span样式在前端得到了保留，我也成功地获得了期望的输出结果：

Hello world