简介
在前端开发中，有时我们需要在不同的页面间共享状态（例如用户登录信息）或者在浏览器和服务器间共享状态（例如预取数据），而传统的做法往往需要通过 URL 参数或者像 Redux 这样的状态管理库来实现。而 @ngx-universal/state-transfer 就提供了一种更为方便的做法：利用 Angular 的 Universal 框架，在服务端对应用的状态进行初始化，然后将其存储到浏览器端的 localStorage 中，以便在客户端的页面中直接读取。
@ngx-universal/state-transfer 的 API 设计非常简单，我们可以通过它提供的两个 service：ServerTransferStateService 和 BrowserTransferStateService 来在服务端和客户端的代码中分别使用。本文会着重介绍 @ngx-universal/state-transfer 的使用方法及其原理。
安装
我们可以使用 npm 直接安装 @ngx-universal/state-transfer 命令如下：
npm install --save @ngx-universal/state-transfer
API
@ngx-universal/state-transfer 的 API 分为两个 service：ServerTransferStateService 和 BrowserTransferStateService，下面分别介绍两个 service 的方法和用法。
ServerTransferStateService
ServerTransferStateService 是用于服务端的状态传输的 service，它的方法如下：
set：用于设置服务端渲染时需要传输到浏览器端的状态。get：用于获取服务端渲染时传输到浏览器端的状态。
使用方法如下：
-- -------------------- ---- ------- ------------------- ------------ --------------------------- - - ---------- - -- ------------- ------------------------------ - ---- ------- --- - ----------------- - -- ---------- ----- ------ - ------------------------------ ---- -
BrowserTransferStateService
BrowserTransferStateService 是用于客户端的状态传输的 service，它的方法如下：
get：用于获取服务端渲染时传输到浏览器端的状态。
使用方法如下：
constructor(private browserState: BrowserTransferStateService) { }
ngOnInit() {
// 获取服务端传输的状态
const myData = this.browserState.get('my-key', {});
}示例
下面给出一个简单示例来说明 @ngx-universal/state-transfer 的使用方法。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - --------------------------- --------------------------- - ---- --------------------------------
------------
--------- -----------
--------- -
-------------
----- ------ - ---- ------
-
--
------ ----- ------------- ---------- ------ -
------ - -----
------------
------- ------------ ---------------------------
------- ------------- ---------------------------
- - -
---------- -
-- -------------
------------------------------ - ---- ------- ---
-- ------------- ------------ --
----------- - ------------------------------ --- -- ------------------------------- ----
-
-当我们运行这个组件的时候，首先会在服务端进行初始化。在客户端打开这个页面时，它会直接从 localStorage 中读取这个状态，不需要再次请求服务器获取数据。
原理
在服务端渲染时，Angular 会将组件中的数据序列化成 JSON 字符串，然后将这个 JSON 字符串作为一个 <script> 标签的文本嵌入到渲染后的 HTML 中。所以，在客户端浏览器中，只需要读取这个 JSON 字符串，然后将其转换成原始的数据结构就可以了。
总结
在这篇文章中，我们介绍了如何使用 @ngx-universal/state-transfer 创建具有服务端渲染的 Angular 应用，并且通过浏览器端的 localStorage 传输状态。这种方式需要注意一些细节，例如在服务端路由变化时及时清空状态，以及保证状态的可序列化等。在实际开发中，@ngx-universal/state-transfer 可以为我们提供一种非常方便的方式来处理前端状态传输。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb6f2b5cbfe1ea0611697