angular 2+ 在路由中保存上下文答案

【问题标题】：angular 2+ save context in routingangular 2+ 在路由中保存上下文
【发布时间】：2018-03-26 15:21:51
【问题描述】：

可以用角度保存页面的上下文吗？

我会解释：

我有一个带有组件的页面

/cars

此页面包含从 $http 请求到服务器的汽车列表

1号车（点击查看详情）

汽车 2（点击查看详情）

3号车（点击查看详情）

4号车（点击查看详情）

当我点击一辆车时，我被重定向到一个新页面（所选汽车的详细信息）

/details/1 // 1 is the id of a car

如果我返回汽车列表，该组件将再次发送 $http 请求以获取汽车列表。

我的问题是，当我返回时，是否可以在不从服务器检索数据的情况下呈现先前的上下文？

一种选择是使用服务来存储数据。

还有更好的主意吗？

（Jira 和 GitLab 正在使用这种 UX 行为...）

谢谢！

【问题讨论】：

标签： angular

【解决方案1】：

通常推荐使用共享服务。

一种选择是将其缓存在发出 HTTP 请求的服务中，以便您的应用程序的结构保持不变，只有服务发生变化（发出一次请求，缓存结果，然后始终返回缓存的值）。

如果此数据在用户与应用交互时会发生变化，那么您需要确定何时使缓存无效。

【讨论】：

【解决方案2】：

您可以将客户端数据保存在localstorage。

例如

localStorage.setItem('car', 'something');

它得到了相当广泛的支持。

确保对值进行字符串化：

localStorage.setItem(itemName, JSON.stringify(itemData));

您可以使用Angular2 @LocalStorage。它是一个小的 Angular2/typescript 装饰器，可以非常容易地使用 HTML5 的 LocalStorage 自动保存和恢复变量。

【讨论】：