如何在Angular中使用innerHTML属性绑定

Angular 2+ 支持将呈现 HTML 的 [innerHTML] 属性绑定。如果您要以其他方式使用插值，它将被视为字符串。

在本文中，您将了解如何使用 [innerHTML] 以及一些使用注意事项。

先决条件

如果您想继续阅读本文，您将需要：

就本文而言，假设您正在使用一个包含 string 的组件，该组件由纯文本和 HTML 实体和元素组成：

export class ExampleComponent {
  htmlStr: string = 'Plain Text Example &amp; <strong>Bold Text Example</strong>';
}

让我们考虑一个在这个字符串上使用插值的模板：

<div>{{ htmlStr }}</div>

编译后，这段代码将产生结果：

纯文本示例 & 粗体文本示例

不呈现 HTML 实体和 HTML 元素。

现在，让我们考虑一个在此字符串上使用 [innerHTML] 属性绑定的模板：

<div [innerHTML]="htmlStr"></div>

重新编译后，这段代码将产生结果：

纯文本示例 & 粗体文本示例

观察 HTML 实体和 HTML 元素是否被渲染。

呈现 HTML 通常有可能引入跨站点脚本 (XSS)。呈现的 HTML 可能包含存在安全问题的恶意脚本。

解决 XSS 的一种方法是将 HTML 元素和属性的种类限制为一组已知的“安全”元素和属性。

在幕后，[innerHTML] 使用了 Angular 的 DomSanitizer，它使用了一系列经过批准的 HTML 元素和属性。

注意： 可以在 html_sanitizer.ts 中查看已批准的 HTML 元素和属性的完整列表。

这将限制您的 [innerHTML] 值使用 <script> 和 <style> 标签和 style 属性。选择使用 [innerHTML] 时请记住此限制。

在本文中，您了解了 Angular 2+ 中的 [innerHTML] 属性绑定。它将导致呈现包含在字符串中的 HTML 标记。

如果您想了解有关 Angular 的更多信息，请查看我们的 Angular 主题页面以获取练习和编程项目。