Angular项目中Typescript生成的加粗内容在HTML中显示为原始标签

问题根因 #

Angular默认开启了HTML内容转义防护，使用{{ }}插值表达式渲染内容时，会自动将内容中的所有HTML标签转义为纯文本，避免恶意脚本注入攻击，因此你通过word.bold()拼接的<b>标签会被直接当成普通字符串渲染，不会生效。

解决方案 #

方案1：使用[innerHTML]属性绑定（快速适配） #

直接修改模板中的渲染逻辑，用[innerHTML]属性绑定代替插值表达式即可，修改后的模板代码如下：

<div *ngFor="let sentence of sentences">
  <li [innerHTML]="formatText()"></li>
</div>

方案2：配合DomSanitizer标记安全内容（存在用户输入场景推荐） #

如果formatText()返回的内容包含用户提交的不可信内容，直接使用innerHTML存在XSS攻击风险，可通过Angular内置的DomSanitizer服务标记返回内容为安全HTML，修改后的TS代码如下：

// 首先导入DomSanitizer
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

// 组件类中注入服务
constructor(private sanitizer: DomSanitizer) {}

formatText(): SafeHtml {
  // 原有业务逻辑不变
  new_text = part1 +  word.bold()  + part2;
  // 标记为安全HTML后返回
  return this.sanitizer.bypassSecurityTrustHtml(new_text);
}

注意：仅当你完全确认返回的HTML内容无恶意脚本时，再使用bypassSecurityTrustHtml方法，避免安全风险。

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