本文详细介绍了在 angular 应用中如何正确地将包含 html 标签的字符串渲染为富文本。当直接使用插值表达式时，html 标签会被当作普通文本显示，无法实现预期样式。通过利用 `[innerhtml]` 属性绑定，开发者可以安全有效地将动态生成的 html 内容呈现在 dom 中，同时强调了相关的安全注意事项，以防止跨站脚本（xss）攻击。
在 Angular 应用开发中，我们经常需要显示包含 HTML 标签的动态文本，例如将数据库中存储的富文本内容或经过特定格式化后的字符串呈现在用户界面上。然而，初学者可能会遇到一个常见问题：当尝试使用 Angular 的插值表达式（{{ }}）来绑定包含 <b>、<i> 等 HTML 标签的字符串时，这些标签并不会被浏览器解析为实际的 HTML 元素，而是作为普通文本直接显示出来。
问题分析：插值表达式的局限性
Angular 的插值表达式（如 {{ myString }}）默认情况下会对绑定内容进行安全转义（sanitization）。这意味着所有 HTML 标签和特殊字符都会被转换为它们的 HTML 实体，例如 <b> 会被转换为 。这种机制是为了防止跨站脚本（XSS）攻击，因为如果直接渲染未经转义的动态内容，恶意脚本可能会被注入并执行。
考虑以下场景，一个组件中有一个包含 HTML 标签的字符串：
export class MyComponent implements OnInit {
wiadomosc: string;
ngOnInit(): void {
const number = '12345';
const msg = `您的订单号是 ${number}。`;
// 假设我们希望将订单号加粗显示
this.wiadomosc = msg.replace(number, `<b>${number}</b>`);
// 此时 wiadomosc 的值为 "您的订单号是 <b>12345</b>。"
}
}如果在模板中直接使用插值表达式：
立即学习“前端免费学习笔记（深入）”；
<p>{{ wiadomosc }}</p>最终在浏览器中显示的结果将是：您的订单号是 <b>12345</b>。，其中 <b> 标签被当作普通文本显示，而不是将订单号加粗。
解决方案：使用 [innerHTML] 属性绑定
要让 Angular 正确地解析并渲染包含 HTML 标签的字符串，我们需要使用属性绑定 [innerHTML]。[innerHTML] 属性允许我们将一个字符串绑定到元素的 innerHTML 属性上，从而使浏览器将其解析为实际的 HTML 内容。
修改模板代码如下：
<p [innerHTML]="wiadomosc"></p>
使用 [innerHTML] 后，Angular 会将 wiadomosc 变量中的 HTML 字符串直接赋值给 <p> 元素的 innerHTML 属性。此时，浏览器会解析 <b>12345</b>，并将其中的 12345 以粗体显示。
示例代码
组件 (my-component.ts)
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.html',
styleUrls: ['./my-component.css']
})
export class MyComponent implements OnInit {
wiadomosc: string;
urlView: string; // 假设还有其他变量
constructor() { }
ngOnInit(): void {
this.loadMessage();
}
loadMessage(): void {
// 模拟从服务获取数据
const data = {
result_info: "您的订单号是 {number}，请点击此处查看详情。",
number: "ORD-2023-001",
pm: "http://example.com/order/ORD-2023-001"
};
if (data.result_info && data.number) {
let msg = data.result_info;
this.urlView = data.pm;
// 将订单号替换为加粗的 HTML 格式
this.wiadomosc = msg.replace('{number}', `<b>${data.number}</b>`);
// 最终 this.wiadomosc 的值为 "您的订单号是 <b>ORD-2023-001</b>，请点击此处查看详情。"
} else {
this.wiadomosc = '未能获取到有效信息。';
}
}
}模板 (my-component.html)
<div>
<h3>消息详情</h3>
<!-- 使用 [innerHTML] 绑定包含 HTML 标签的字符串 -->
<p [innerHTML]="wiadomosc"></p>
<!-- 如果有 URL，也可以显示 -->
<p *ngIf="urlView">
<a [href]="urlView" target="_blank">查看详情页面</a>
</p>
</div>通过上述修改，wiadomosc 变量中的 <b> 标签将正确地渲染为粗体文本。
安全注意事项：跨站脚本 (XSS) 风险
虽然 [innerHTML] 解决了 HTML 渲染问题，但它引入了潜在的跨站脚本（XSS）安全风险。如果绑定到 [innerHTML] 的字符串内容来源于不可信的外部输入（例如用户评论、第三方API响应），恶意用户可能会注入包含 JavaScript 代码的 HTML 标签。当这些标签被渲染时，恶意脚本就会在用户的浏览器中执行，可能导致数据窃取、会话劫持等问题。
Angular 的内置安全机制： 值得庆幸的是，Angular 框架在处理 [innerHTML] 时，默认会执行安全净化（sanitization）。这意味着 Angular 会自动检测并移除绑定内容中的潜在危险代码（如 <script> 标签或带有 JavaScript 的事件属性）。然而，这种自动净化并非万无一失，并且可能会移除一些你希望保留的合法 HTML 元素或属性。
最佳实践：
只绑定可信内容： 确保绑定到 [innerHTML] 的字符串内容始终来自你完全信任的来源，并且你已经对其内容进行了严格的控制和验证。
后端净化： 最安全的做法是在服务器端对所有用户提交的富文本内容进行严格的净化处理，只允许安全的 HTML 标签和属性通过。
-
使用 DomSanitizer (谨慎使用)： 如果你确实需要渲染 Angular 默认会认为不安全的 HTML 内容（例如某些 <iframe> 或特定样式），并且你确信其来源是安全的，可以使用 Angular 的 DomSanitizer 服务来标记内容为安全。
import { Component, OnInit } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; @Component({ selector: 'app-safe-html-example', template: `<div [innerHTML]="trustedHtml"></div>` }) export class SafeHtmlExampleComponent implements OnInit { trustedHtml: SafeHtml; constructor(private sanitizer: DomSanitizer) { } ngOnInit(): void { const potentiallyUnsafeHtml = '<p>这是一个<b>安全</b>的段落。</p><script>alert("XSS!");</script>'; // 警告：只有当你100%确定内容安全时才使用 bypassSecurityTrustHtml this.trustedHtml = this.sanitizer.bypassSecurityTrustHtml(potentiallyUnsafeHtml); // Angular 默认会净化 <script> 标签，但如果使用 bypassSecurityTrustHtml 则不会 // 正确的做法是： // this.trustedHtml = this.sanitizer.sanitize(SecurityContext.HTML, potentiallyUnsafeHtml); // 这样会进行净化 // 或者更安全地，只净化来自不可信源的部分 } }强烈建议： 除非你非常清楚自己在做什么，并且已经充分评估了风险，否则应避免使用 bypassSecurityTrustHtml 等方法。优先考虑通过后端净化或只允许有限的、安全的 HTML 子集。
总结
在 Angular 中显示包含 HTML 标签的动态文本，正确的方法是使用 [innerHTML] 属性绑定，而不是插值表达式。[innerHTML] 允许浏览器将字符串解析为实际的 HTML 结构，从而实现富文本的显示效果。同时，开发者必须时刻警惕与之相关的 XSS 安全风险，并采取适当的预防措施，如确保内容来源可信、进行后端净化，或在极少数情况下谨慎使用 DomSanitizer 服务。遵循这些最佳实践，可以确保应用既功能强大又安全可靠。
