本文将详细说明如何在 Angular 中为模板里动态插入的文本片段（例如 this.current.name）添加 HTML 样式（如加粗显示），并借助 DomSanitizer 安全渲染包含内联 HTML 的字符串，在避免 XSS 风险的同时，无需引入额外组件即可完成动态文本高亮。

本文将介绍如何在 Angular 中对模板内动态插入的文本内容（如 `this.current.name`）进行 HTML 样式处理（例如加粗、高亮），并通过 `DomSanitizer` 安全渲染带有内联 HTML 的字符串，从而规避 XSS 风险，同时不必额外封装组件。

在 Angular 应用开发中，如果你想对动态拼接字符串中的某个片段（例如用户名、编号、关键字等）进行强调展示，比如加粗、变色或突出显示，直接在 TypeScript 中拼接 HTML 标签（例如{{name}}）通常是无效的。原因在于 Angular 默认会把插值表达式输出当作普通文本处理，因此这些 HTML 标签会被转义并原样显示，而不会被浏览器解析为真正的 HTML 样式。

更推荐的做法是：使用 [innerHTML] 绑定配合 DomSanitizer 安全注入可信 HTML。这个 Angular 安全渲染方案的关键有两点：

1. 在目标组件（例如 ActionDialogComponent）模板中，使用属性绑定替代普通插值：

2. 在调用方组件中，必须显式调用 DomSanitizer.bypassSecurityTrustHtml() 对包含 HTML 的字符串进行信任标记，否则 Angular 的安全机制会拦截部分内容并将其清除（控制台常见提示为 WARNING: sanitizing HTML stripped some content）。

完整实现示例：

import { DomSanitizer } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

openThatThing(): void {
this.action = thing.that.needs.done;
// ✅ 安全拼接：仅对已知可控的动态值包裹 HTML
const messageBody = this.sanitizer.bypassSecurityTrustHtml(
`Do this to ${this.current.name}?`
);

const thisThing = this.dialog.open(ActionDialogComponent, {
width: '400px',
disableClose: true,
hasBackdrop: false,
panelClass: ['something', 'mat-typography'],
data: { 
title: 'Confirm Thing', 
msgBody: messageBody,// 传入已信任的 HTML 对象
primaryAction: 'Action' 
}
});
}

⚠️ 重要注意事项：

• bypassSecurityTrustHtml() 只适用于你能够完全信任内容来源的场景（例如 this.current.name 来自受控数据模型、已经过 XSS 过滤，或仅包含字母和数字）。如果该值可能来自用户输入、第三方接口或外部 API，务必先进行 HTML 清理（例如移除