路由中的angular 2+保存上下文

时间:2018-03-26 15:21:51

标签: angular

可以角度来保存页面的上下文吗?

我会解释:

我有一个包含组件的页面

/cars

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

Car 1(点击查看详情)

Car 2(点击查看详情)

Car 3(点击查看详情)

Car 4(点击查看详情)

当我点击一辆车时,我被重定向到一个新页面(所选车辆的细节)

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

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

我的问题是,当我回去时,可以在不从服务器检索数据的情况下渲染上一个上下文吗?

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

还有更好的主意吗?

(Jira和GitLab正在使用此UX行为......)

谢谢!

2 个答案:

答案 0 :(得分:1)

通常建议使用共享服务来执行此操作。

一个选项是将其缓存在发出HTTP请求的服务中,以便应用程序的结构保持不变,只有服务更改(请求一次,缓存结果,之后,始终返回缓存的值)。

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

答案 1 :(得分:0)

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

例如

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

它得到了广泛的支持。

确保字符串化值:

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

您可以使用Angular2 @LocalStorage。它是一个小的Angular2 /打字稿装饰器,使用HTML5'自动保存和自动恢复变量非常容易。 localStorage的。