在 Web 开发中，我们经常需要从服务器获取一些数据来动态渲染页面。有时这些数据包含富文本格式的 HTML，但是我们不想直接将标签暴露给用户，而是希望将其渲染为可读性更好的文本。
解决方案
在 Angular 2 中，我们可以使用 ngSanitize 模块来解决这个问题。该模块提供了一个名为 DomSanitizer 的服务，它可以负责对 HTML 进行安全性检查和转换，并返回新的 HTML 片段。
具体实现步骤如下：
- 在组件中引入 DomSanitizer 服务：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- -------- - ---- ----------------------------
------------
--------- -------------------
--------- -
---- -----------------------------
--
--
------ ----- ----------- -
------------------- ---------- ------------- --
--------- ---------
-- ---
-- 从 JSON 响应中获取 HTML 字符串并传递给 DomSanitizer 服务：
this.htmlData = this.sanitizer.bypassSecurityTrustHtml(htmlString);
- 在模板中使用
[innerHTML]属性绑定到渲染后的 HTML 片段：
<div [innerHTML]="htmlData"></div>
示例代码
下面是一个简单的示例，它从服务器获取一个包含 HTML 代码的 JSON 响应，并使用上述方法进行渲染：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ------------- -------- - ---- ----------------------------
------------
--------- -------------------
--------- -
---- -----------------------------
--
--
------ ----- ----------- -
------------------- ----- ----------- ------- ---------- ------------- --
--------- ---------
---------- -
------------------------------------------- - ----- ------ -- -- -
------------- - --------------------------------------------------
---
-
-在以上示例中，我们通过 HttpClient 服务从 /api/html 接口获取数据并在页面上渲染。HTML 字符串被传递给 DomSanitizer 服务进行处理，然后绑定到 [innerHTML] 属性以在页面上呈现。
总结
本文介绍了如何在 Angular 2 中使用 ngSanitize 模块来呈现 HTML 代码并将其转换为可读性更好的文本。通过使用 DomSanitizer 服务和 [innerHTML] 属性，我们可以轻松地实现这个功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25287