Angular中innerHTML属性绑定的详细方法与快速上手实战教程

简介

在 Angular 2+ 开发中，如果需要渲染一段包含 HTML 标记的字符串，最直接且高效的方式就是使用 [innerHTML] 属性绑定。如果采用插值表达式（双花括号），内容会被视为纯文本，标签与 HTML 实体均不会被解析。

本文将详细讲解 [innerHTML] 的具体使用方法，并梳理开发过程中常见的注意事项与潜在陷阱。

先决条件

建议读者对 Angular 的插值语法和属性绑定有基本了解，这样阅读起来会更加顺畅；当然，即使没有相关基础，跟随本文实例也能掌握核心用法。

第一步 —— 用 innerHTML 渲染 HTML

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

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

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

{{ htmlStr }}

实际渲染的结果是：

Plain Text Example & Bold Text Example

可以看到，& 和 都原样显示，未被解析。