如何在Angular 5+中的路线导航之间保留客户端对象状态

Question

对此我是陌生的，正在考虑传递一个我打算保留在客户端的对象集合，并在路线之间共享，发布导航。我希望在理解“服务”状态在路线导航中仍然存在时所缺少的内容有所帮助。

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

Answer 1

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});

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