Angular 2:如何从 JSON 响应中呈现 HTML 而不将标签显示给用户?

在 Web 开发中,我们经常需要从服务器获取一些数据来动态渲染页面。有时这些数据包含富文本格式的 HTML,但是我们不想直接将标签暴露给用户,而是希望将其渲染为可读性更好的文本。

解决方案

在 Angular 2 中,我们可以使用 ngSanitize 模块来解决这个问题。该模块提供了一个名为 DomSanitizer 的服务,它可以负责对 HTML 进行安全性检查和转换,并返回新的 HTML 片段。

具体实现步骤如下:

  1. 在组件中引入 DomSanitizer 服务:
------ - --------- - ---- ----------------
------ - ------------- -------- - ---- ----------------------------

------------
  --------- -------------------
  --------- -
    ---- -----------------------------
  --
--
------ ----- ----------- -
  ------------------- ---------- ------------- --

  --------- ---------

  -- ---
-
  1. 从 JSON 响应中获取 HTML 字符串并传递给 DomSanitizer 服务:
------------- - ---------------------------------------------------
  1. 在模板中使用 [innerHTML] 属性绑定到渲染后的 HTML 片段:
---- -----------------------------

示例代码

下面是一个简单的示例,它从服务器获取一个包含 HTML 代码的 JSON 响应,并使用上述方法进行渲染:

------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ------------- -------- - ---- ----------------------------

------------
  --------- -------------------
  --------- -
    ---- -----------------------------
  --
--
------ ----- ----------- -
  ------------------- ----- ----------- ------- ---------- ------------- --

  --------- ---------

  ---------- -
    ------------------------------------------- - ----- ------ -- -- -
      ------------- - --------------------------------------------------
    ---
  -
-

在以上示例中,我们通过 HttpClient 服务从 /api/html 接口获取数据并在页面上渲染。HTML 字符串被传递给 DomSanitizer 服务进行处理,然后绑定到 [innerHTML] 属性以在页面上呈现。

总结

本文介绍了如何在 Angular 2 中使用 ngSanitize 模块来呈现 HTML 代码并将其转换为可读性更好的文本。通过使用 DomSanitizer 服务和 [innerHTML] 属性,我们可以轻松地实现这个功能。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/25287