Angular 默认会转义 innerHTML 绑定的字符串以防止 XSS 攻击，因此直接插入含 等标签的数据库文本会导致标签被原样显示；需通过 DomSanitizer 显式标记为可信 HTML 才能正确解析渲染。
angular 默认会转义 `innerhtml` 绑定的字符串以防止 xss 攻击，因此直接插入含 `` 等标签的数据库文本会导致标签被原样显示；需通过 `domsanitizer` 显式标记为可信 html 才能正确解析渲染。
在 Angular 应用中，当动态内容（如从 MSSQL 数据库读取的 control.label）包含内联 HTML 标签（例如 <strong>not</strong> 或 <u>not</u>）时，仅使用 [innerHTML]="control.label" 是不够的——Angular 的内置 DOM sanitizer 会自动剥离或转义这些标签，将其作为纯文本输出，从而导致样式失效。
✅ 正确做法是借助 DomSanitizer 的 bypassSecurityTrustHtml() 方法，将原始字符串显式声明为“已审查、可信任的 HTML”：
import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
selector: 'app-dynamic-label',
templateUrl: './dynamic-label.component.html'
})
export class DynamicLabelComponent implements OnInit {
control = { label: 'This is <strong>not</strong> a problem — it is <u>critical</u>!' };
safeHtml: SafeHtml;
constructor(private sanitizer: DomSanitizer) {}
ngOnInit() {
this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.control.label);
}
}
对应模板中使用：
<div></div>
⚠️ 注意事项：
-
bypassSecurityTrustHtml()绕过 Angular 的安全检查，仅应在你完全信任数据来源（如受控后台、已过滤/转义的数据库字段）时使用； - 切勿对用户直输内容（如评论、表单输入）直接调用该方法，否则将引入 XSS 风险；
- 若需兼顾安全性与富文本支持，建议在服务端对 HTML 进行白名单过滤（如仅允许
<strong></strong>,<em></em>,<u></u>），再传入前端； - 不推荐在模板中调用
sanitizer方法（如[innerHTML]="sanitizer.bypassSecurityTrustHtml(control.label)"），因其违反单向数据流原则且无法触发变更检测。
总结：[innerHTML] 本身是安全的，但“安全”的代价是牺牲动态 HTML 解析能力；DomSanitizer 提供了可控的“出口”，让开发者在明确风险边界的前提下，精准释放 HTML 渲染能力——这是 Angular 安全模型的设计哲学，而非缺陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
