在构建单页应用（SPA）时，前后端渲染（SSR）是一个流程较为复杂的过程。Angular 框架的开发者推荐使用 Universal 实现 SSR，这种方法需要在前后端之间传递渲染数据。本文介绍如何使用 npm 包 ngx-universal-state-transfer 实现数据传递。
ngx-universal-state-transfer 是什么？
ngx-universal-state-transfer 是一个 Angular npm 包，它提供了浏览器端和服务端数据传输的一致性。ngx-universal-state-transfer 在服务端生成一个全局变量，这个变量将在客户端使用，从而跨 Angular 应用程序的传输状态。使用此模块，可以使数据在客户端和服务器之间自动转移。
下面是一个简单的使用场景：
-- -------------------- ---- -------
------ - -------------------- - ---- --------------------------------
----- ----------- -
------- ----------- ------ - -----
------------------- -------------- --------------------- --
----- -------------- --------------- -
-- ---------------- --- ----- -
----- ---------- - -----------------------------------------
-- ------------ -
--------------- - -----------
- ---- -
--------------- - ----- -----------------
-------------------------------- -----------------
-
-
------ ----------------
-
------- ----- ------------ --------------- -
----- -------- - ----- -------------------
----- ---- - ----- ----------------
------ -----
-
-在上面的代码中，StateTransferService 是用于在客户端和服务器之间传递数据的主要服务。例如，要使用此示例中的服务进行异步数据检索，请调用 getHttpData（）方法。此方法首先检查服务器是否已设置有缓存的数据。如果有，则返回缓存数据；如果没有，则调用 fetchData() 方法从服务器获取数据。获取数据后，它将存储在缓存中，并调用 stateTransfer.set() 方法存储数据，这会在客户端调用 stateTransfer.get() 方法时返回该数据。
ngx-universal-state-transfer 使用教程
接下来，我们将使用 ngx-universal-state-transfer 实现一个简单的应用。
安装 ngx-universal-state-transfer
首先，在你的 Angular 项目根目录下运行以下命令，安装 ngx-universal-state-transfer：
npm install @ngx-universal/state-transfer
服务端配置
app.server.module.ts
在项目中先创建一个服务端渲染模块，查询官方文档了解更多 Angular SSR 相关信息。
然后，在 app.server.module.ts 文件中，添加 TransferState 和 ServerTransferStateModule 来进行服务端共享状态：
-- -------------------- ---- -------
------ ---------- ---- ----------------
------ -------------- -------------------------- ---- ---------------------------
------ ----------- ---- ---------------
------ -------------- ---- ------------------
------ --------------- ---- ----------------------------
-----------
-------- -
----------
-------------
--------------------------
--
---------- ---------------
--
------ ----- --------------- -
------------------- -------------- -------------- - -
------------- - -- -- -
----- ----- - ----------------------------
-- ------------------------ ---------------------------------
----------------- - ------
-
-客户端配置
app.browser.module.ts
在 app.browser.module.ts 文件中，添加 BrowserTransferStateModule 来进行客户端共享状态：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - -------------------------- - ---- ----------------------------
------ - --------- - ---- ---------------
------ - ------------ - ---- ------------------
-----------
-------- -
----------
------------------------------------ ------ -------- ---
---------------------------
--
---------- --------------
--
------ ----- ---------------- - -这里的 appid 是在客户端和服务器之间传递状态所需要的应用程序标识符。
app.component.ts
在最后一步中，我们将添加一些示例代码来演示如何在 Angular 组件中使用 ngx-universal-state-transfer，并在客户端和服务器之间共享数据：
-- -------------------- ---- -------
------ ----------- ------- ---- ----------------
------ --------------- ------------- ---- ----------------------------
------ ---------------------- ---- --------------------------------
----- ------------- - ---------------------------------
------------
--------- -----------
--------- -
---- ------------ ------ ----------- ------------------- ------------ ---
-------------------------------- -------
---- ------------------
---- -----------------------
----------- ---------- ------
------
---- -----------------------
----------- ---------- ------
------
------
------
--
------- --
---------- -
-------- -----
---------------- -------------
-
----------------
--------------- -
------ ------
-
---
--
------ ----- ------------ ---------- ------ -
------ ------ ------ - --------
------ -------- ------ - --------
------ ----------- ------ - ---
------ ----------- ------ - ---
------------
------- --------- ---------------------
------- -------------- --------------
- - -
---------- -
--------------- - ---------------------------------------- ----
-- ---------------- --- --- -
------------------
--------- -- -----------
------------ -- -
--------------- - -----
---------------------------------------- -----------------
---
-
--------------- - --------------------------------------------- ----
-- ---------------- --- --- -
------------------
--------- -- -----------
------------ -- -
--------------- - -----
--------------------------------------------- -----------------
---
-
-
-在此示例中，我们向客户端渲染器和服务器渲染器传递标记为 SOME_DATA_KEY 的状态。 serverData 和 clientData 属性将包含从服务器和客户端传递的数据。如果没有从服务器获取到数据，则通过 fetch() 方法异步获取数据并将其存储在 ngx-universal-state-transfer 中。
结论
ngx-universal-state-transfer 简化了在客户端和服务器之间进行状态传输的过程。使用该模块，数据将在客户端和服务器之间自动传输，并且可以在 Angular 应用程序中使用。通过上述示例，我们可以观察到使用 ngx-universal-state-transfer 的 API 是相对简单的。
无论你正在使用 Angular 进行单页应用或渐进增强应用开发，通过使用 ngx-universal-state-transfer，你可以快速的实现客户端和服务器之间的数据共享。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ebd81e8991b448dc732