我如何保留组件状态以使后退按钮在 router.navigateByUrl 之后工作答案

【问题标题】：How can i preserve the component state in order to make back button working after router.navigateByUrl我如何保留组件状态以使后退按钮在 router.navigateByUrl 之后工作
【发布时间】：2018-02-01 15:55:08
【问题描述】：

当我有一个加载了动态内容的组件时，如何使浏览器后退按钮正常工作，然后我使用this.router.navigateByUrl 导航出他。

问题是组件 A 是一个搜索条件表单和结果列表，现在如果我动态填充了结果，如果我点击返回按钮，我点击结果详细信息（组件 B），我丢失了我的搜索结果列表。

我需要粘性组件状态，防止破坏组件dom，在angular2中可以吗？

【问题讨论】：

我正在使用 angular5
这并不能完全按照说明回答您的问题，但它可能会有所帮助：如果您愿意在这种情况下不使用路由器：您想要的父/子列表/详细信息问题的一种解决方案保留父级的状态但子级显示时看不到它，是用隐藏属性使其不可见，例如当我这样做时，我没有使用路由器.

标签： angular

【解决方案1】：

因此，如果我的问题正确，您的问题是您有一个列表，单击该列表中的一个项目以进入详细视图（这是一个自己的组件），如果您丢失这些项目的信息，导航回列表。

组件不应该直接获取或保存数据，当然也不应该故意提供虚假数据。他们应该专注于呈现数据并将数据访问委托给服务。

您将需要包含您列表中的项目的服务。查看官方文档，那里解释得很好。 https://angular.io/tutorial/toh-pt4#why-services

【讨论】：

我已经使用服务来获取数据和组件仅用于演示，但我需要通过服务获取获取的组件列表将保留在浏览器历史记录中（以及带有搜索过滤器的 UI 我设置）。请参阅 angularjs 中的 christopherthielen.github.io/ui-router-extras/example/… 粘性状态，如何在 angular2 中做到这一点？