简介

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

本文将向您介绍[innerHtml]的使用方法和使用注意事项。

前提条件

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

• 熟悉一些角度interpolation和property-binding可能也会有帮助。

第一步-使用innerHTML

出于本文的目的，假设您正在使用的组件包含由纯文本、HTML实体和元素的混合组成的字符串：

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

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

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

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

纯文本示例&amp；amp；&lt；strong&gt；粗体文本示例&lt；/strong&gt；

不呈现HTML实体和HTML元素。

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

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

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

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

注意到呈现了HTML实体和HTML元素。

第二步-了解限制

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

寻址XSS的一种方法是将HTML元素和属性的类型限制为一组已知的安全元素和属性。

在幕后，[innerHTML]使用ANGLE的[DomSanitizer`](https://angular.io/api/platform-browser/DomSanitizer)，它使用一系列经过批准的Html元素和属性。

<$>[备注] 注意： 可在html_sanitizer.ts.中查看已批准的Html元素和属性的完整列表 <$>

这将限制您的[innerHTML]值使用<脚本>和