angular2通过整个网站传递数据

时间:2017-03-01 13:46:36

标签: angular parameter-passing persistence

我有像购买衣服的购物车用户数据'。我有一个用户填充购物车的商店屏幕。要求是,如果我在该屏幕上并填充购物车以在用户进入结帐屏幕时保留它。与此同时,他可以转到我的帐户,我的设置,添加新地址,添加新的信用卡屏幕,当他进入支付订单屏幕或再次回到购物车时,我应该使用先前在第一次访问时选择的数据填充这些屏幕。商店屏幕。我考虑将它放入我的主应用程序模块中的一些全局common.service.ts(它加载所有其他模块)buut当我刷新页面数据没有持久...我想出的唯一想法是使用cookie退出时清除它们或者当标签关闭时它们会自动清除,但此解决方案目前对我来说不合适,所以我寻求更好的方法。

2 个答案:

答案 0 :(得分:2)

您绝对应该使用服务来使所有组件和"页面"都可以访问数据。对于跨浏览器刷新的数据持久性,您可以使用cookie或本地存储。我对此类数据的偏好是本地存储,因为您可以将数据表示为JSON,然后使用JSON.stringifyJSON.parse分别保存和检索数据。

一般策略是在内存数据可用时始终使用内存数据。每次修改数据时,都会将新版本保存到本地存储。当服务首次启动时,它应该从本地存储加载以前的数据。

另一个可能的选择是按照与上面为本地存储定义的策略类似的策略将此信息保存在数据库中。使用数据库的一个好处是数据可以跨浏览器保留,而使用本地存储无法实现。

答案 1 :(得分:0)

在Angular 2中查看存储状态时,一个流行的工具是redux(https://www.npmjs.com/package/ng2-redux),您可以使用它来存储和访问会话中的状态,并将其与此问题的答案相结合({{3}您可以订阅edux商店中的更改,并在发生时将其保存到本地存储中。这是一个非常可靠的模式,并允许很多伟大的事情(例如,对于购物车,你可以重播状态,所以如果用户从购物车中删除了某些内容然后想要它,那就非常容易了。)