Angular 8如何显示加粗文本？innerText绑定加粗标签不生效

• [innerText]绑定的逻辑是将传入值作为纯文本渲染，所有HTML标签都会被转义为普通字符输出，自然无法解析<b>标签实现加粗效果。
• C#中Environment.NewLine生成的是纯文本换行符（\r\n/\n），HTML默认不会将纯文本换行识别为页面换行，即便解析HTML也无法实现路径换行到标题下方的效果。

方案1：快速修复（保留后端拼接逻辑） #

1. 调整后端C#代码，将纯文本换行替换为HTML可识别的换行标签<br>，输出标准HTML片段：

FormName = $"<b>{x.FormName}</b><br>{x.Path}"

2. 将Angular模板中的[innerText]绑定替换为[innerHTML]，该绑定会将传入值作为HTML解析渲染：

<div [innerHTML]="right.formName"></div>

注：由于该片段是后端可控的固定结构（无用户可控的恶意输入内容），Angular内置的DomSanitizer会默认放行<b>、<br>这类安全标签，无需额外绕过安全校验，不存在XSS风险。

方案2：Angular最佳实践（推荐） #

不推荐在后端拼接HTML字符串，遵循前后端职责分离原则，后端直接返回结构化原始字段即可：

// 后端直接返回原始字段，不拼接任何HTML标签
new {
  FormName = x.FormName,
  Path = x.Path
}

前端模板直接编写DOM结构，靠CSS控制样式和布局，可维护性更强，也完全规避HTML解析、安全相关问题：

<div>
  <strong>{{ right.formName }}</strong>
  <div>{{ right.path }}</div>
</div>

如果需要调整路径的字号、颜色，或者后续给标题/路径加点击交互，这种写法的灵活度远高于拼接HTML字符串的方案。

内容的提问来源于stack exchange，提问作者Wasim