介绍

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

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

先决条件

如果你想跟随这篇文章，你需要：

• 熟悉 Angular插值和属性绑定也可能会有所帮助。

步骤 1 — 使用 innerHTML

出于本文的目的，假设您正在使用一个组件，该组件包含string由纯文本和 HTML 实体和元素的混合组成：

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

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

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

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

纯文本示例 <strong>粗体文本示例</strong>

不呈现 HTML 实体和 HTML 元素。

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

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

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

纯文本示例和粗体文本示例

观察 HTML 实体和 HTML 元素被呈现。

第 2 步 – 了解限制

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

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

在幕后，[innerHTML]使用 Angular 的DomSanitizer，它使用已批准的 HTML 元素和属性列表。

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

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

结论

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

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