时间戳

首页 > 解决方案 > 如何在Angular 5+中的路由导航之间保持客户端对象状态

angular - 如何在Angular 5+中的路由导航之间保持客户端对象状态

问题描述

我对此并不陌生，正在考虑传递一个我计划在客户端坚持的对象集合，并在路由之间共享，发布导航。当我期望“服务”状态在路线导航中持续存在时，希望能帮助我理解我缺少什么。

我已经看到甚至 AppModule 的构造函数在每次路由导航后都会被触发，所以想知道，本地存储或将数据持久化到服务器是否是唯一的答案？

标签： angular

解决方案

LocalStorage 和持久化到服务器是选项；许多应用程序（尤其是较大的应用程序）将使用的常见模式是类似通量或 redux 的实现。

简而言之，flux/redux 类型的实现提供了任何组件都可以使用的单一数据存储，而无需重新加载单页应用程序（Angular、React 等）或在组件之间传递大量数据。

要使用您的示例，这将是您的对象集合示例的过程。

  1. 应用程序引导
  2. 应用程序从您的服务器检索初始数据（状态）
  3. 应用程序将状态存储在全局对象中
  4. 当一个组件被实例化时，它从全局对象中检索状态

因为状态都在一个地方（在全局对象上），所以影响该全局对象的任何操作都将反映在使用该状态的任何组件中。

这是 redux/flux 所涉及的所有内容的非常不完整的图片，但是如果您只想手动滚动其中的持久性部分，您可以将对象集合添加到 DOM 窗口，如下所示：

window.state = {};
window.state.collection = [{obj1}, {obj2}, {obj3}]


component.state.collection = window.state.collection;
component.state.collection.push({obj4});

有关通量的更多信息，互联网上有大量关于它的非常详细的资源。具体的实现（“redux”）可以在这里找到https://redux.js.org/。redux 的特定角度实现在这里：https ://github.com/angular-redux/store 。

推荐阅读