Angular innerHTML属性绑定方法

简介

在 Angular 2+ 环境下，如果需要渲染一段包含 HTML 标记的字符串，最直接的方式是使用 [innerHTML] 属性绑定。如果采用插值（双花括号）方式，内容会被当作纯文本处理，标签和实体都不会被解析生效。

本文将详细说明 [innerHTML] 的具体用法，以及实际应用中需要留意的关键注意事项。

先决条件

如果已经了解 Angular 插值和属性绑定的基本概念，阅读本文会更加顺畅——即便不熟悉，跟随示例也能掌握核心要点。

第一步 —— 使用 innerHTML 渲染 HTML 内容

假设组件中有一个字符串，它混合了纯文本、HTML 实体以及标签：

export class ExampleComponent {
  htmlStr: string = 'Plain Text Example & Bold Text Example';
}

如果将该字符串放入插值表达式：

{{ htmlStr }}

实际渲染结果为：

Plain Text Example & Bold Text Example

可以看到，& 和 都原样显示，并未被解析为 HTML 实体和标签。

改用 [innerHTML] 属性绑定：

此时输出结果完全不同：

Plain Text Example & Bold Text Example

HTML 实体被正确转义， 标签也生效，文字变为粗体。这正是渲染 HTML 标记时期望的效果。

第二步 —— 理解限制：安全机制是首要考量

直接渲染任意 HTML 字符串会带来跨站脚本攻击（XSS）风险。如果字符串中夹带了恶意脚本，后果严重。Angular 通过内置的 DomSanitizer 服务来解决这一问题，该服务采用一套白名单机制，只允许渲染经过审核的“安全”元素和属性。

具体而言，使用 [innerHTML] 绑定的内容中， 标签、 标签以及元素上的 style 属性都会被过滤，不会生效。因此，在决定使用 [innerHTML] 之前，必须清楚这一限制——它无法执行脚本或加载外部样式。

结论

总结要点：在 Angular 2+ 中，[innerHTML] 是渲染 HTML 标记的标准方式，能够正确解析字符串中的标签和实体，同时通过内置净化机制防范 XSS 攻击。掌握它的用法与边界，就可以安全高效地处理这类渲染需求。