本文详细介绍了在 angular 应用中如何正确地将包含 html 标签的字符串渲染为富文本。当直接使用插值表达式时，html 标签会被当作普通文本显示，无法实现预期样式。通过利用 `[innerhtml]` 属性绑定，开发者可以安全有效地将动态生成的 html 内容呈现在 dom 中，同时强调了相关的安全注意事项，以防止跨站脚本（xss）攻击。

在 Angular 应用开发中，我们经常需要显示包含 HTML 标签的动态文本，例如将数据库中存储的富文本内容或经过特定格式化后的字符串呈现在用户界面上。然而，初学者可能会遇到一个常见问题：当尝试使用 Angular 的插值表达式（{{ }}）来绑定包含 、 等 HTML 标签的字符串时，这些标签并不会被浏览器解析为实际的 HTML 元素，而是作为普通文本直接显示出来。

问题分析：插值表达式的局限性

Angular 的插值表达式（如 {{ myString }}）默认情况下会对绑定内容进行安全转义（sanitization）。这意味着所有 HTML 标签和特殊字符都会被转换为它们的 HTML 实体，例如 会被转换为 zuojiankuohaophpcnbyoujiankuohaophpcn。这种机制是为了防止跨站脚本（XSS）攻击，因为如果直接渲染未经转义的动态内容，恶意脚本可能会被注入并执行。

考虑以下场景，一个组件中有一个包含 HTML 标签的字符串：

export class MyComponent implements OnInit {
  wiadomosc: string;

  ngOnInit(): void {
    const number = '12345';
    const msg = `您的订单号是 ${number}。`;
    // 假设我们希望将订单号加粗显示
    this.wiadomosc = msg.replace(number, `${number}`);
    // 此时 wiadomosc 的值为 "您的订单号是 12345。"
  }
}

如果在模板中直接使用插值表达式：

{{ wiadomosc }}

最终在浏览器中显示的结果将是：您的订单号是 12345。，其中 标签被当作普通文本显示，而不是将订单号加粗。

解决方案：使用 [innerHTML] 属性绑定

要让 Angular 正确地解析并渲染包含 HTML 标签的字符串，我们需要使用属性绑定 [innerHTML]。[innerHTML] 属性允许我们将一个字符串绑定到元素的 innerHTML 属性上，从而使浏览器将其解析为实际的 HTML 内容。

修改模板代码如下：

使用 [innerHTML] 后，Angular 会将 wiadomosc 变量中的 HTML 字符串直接赋值给

元素的 innerHTML 属性。此时，浏览器会解析 12345，并将其中的 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-2025-001",
      pm: "http://example.com/order/ORD-2025-001"
    };

    if (data.result_info && data.number) {
      let msg = data.result_info;
      this.urlView = data.pm;
      // 将订单号替换为加粗的 HTML 格式
      this.wiadomosc = msg.replace('{number}', `${data.number}`);
      // 最终 this.wiadomosc 的值为 "您的订单号是 ORD-2025-001，请点击此处查看详情。"
    } else {
      this.wiadomosc = '未能获取到有效信息。';
    }
  }
}

模板 (my-component.html)

  
消息详情

  
  


  
  

    查看详情页面

通过上述修改，wiadomosc 变量中的 标签将正确地渲染为粗体文本。

安全注意事项：跨站脚本 (XSS) 风险

虽然 [innerHTML] 解决了 HTML 渲染问题，但它引入了潜在的跨站脚本（XSS）安全风险。如果绑定到 [innerHTML] 的字符串内容来源于不可信的外部输入（例如用户评论、第三方API响应），恶意用户可能会注入包含 JavaScript 代码的 HTML 标签。当这些标签被渲染时，恶意脚本就会在用户的浏览器中执行，可能导致数据窃取、会话劫持等问题。

Angular 的内置安全机制： 值得庆幸的是，Angular 框架在处理 [innerHTML] 时，默认会执行安全净化（sanitization）。这意味着 Angular 会自动检测并移除绑定内容中的潜在危险代码（如

最佳实践：

  1. 只绑定可信内容： 确保绑定到 [innerHTML] 的字符串内容始终来自你完全信任的来源，并且你已经对其内容进行了严格的控制和验证。

  2. 后端净化： 最安全的做法是在服务器端对所有用户提交的富文本内容进行严格的净化处理，只允许安全的 HTML 标签和属性通过。

  3. 使用 DomSanitizer (谨慎使用)： 如果你确实需要渲染 Angular 默认会认为不安全的 HTML 内容（例如某些 

    import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-safe-html-example',
  template: ``
})
export class SafeHtmlExampleComponent implements OnInit {
  trustedHtml: SafeHtml;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit(): void {
    const potentiallyUnsafeHtml = '
    这是一个安全的段落。
    ';
    // 警告：只有当你100%确定内容安全时才使用 bypassSecurityTrustHtml
    this.trustedHtml = this.sanitizer.bypassSecurityTrustHtml(potentiallyUnsafeHtml);
    // Angular 默认会净化  雄杰鑫电商资讯网 版权所有  鄂ICP备2024084503号