从Angular中的详细信息页面导航后，保持“搜索”页面的状态

Question

我是角色的新手，当用户通过点击导航到详细信息页面时，我需要维护搜索结果页面的状态（即保留搜索结果网格的排序和过滤值）搜索结果网格中的链接，然后再次导航回搜索页面。我尝试使用CustomReuseStartegy，但我面临两个问题：

1. 当用户在详细信息页面中进行一些更改时，需要更新搜索结果。
2. 分离页面后。它没有再次附加。 （当用户导航到其他某个页面（不同的页面而不是详细信息页面）并返回搜索页面时，页面不会重新加载。

如果有人能够使用路由重用策略或不同的解决方案来处理我的需求，可以提供有关如何以及何时重新附加组件的信息，这将是很好的。

Answer 1

如果需要维护组件（页面）之间的状态，则应使用服务。

从“搜索”页面将数据存储在服务中，然后离开页面。返回“搜索”页面时，从服务中检索数据。

此外，如果符合您的要求，您可以将数据存储在localStorage或sessionStorage中。

如果您使用的是Angular 1.x click here。

对于Angular 2+ click here。

Answer 2

我只想在用户按下后退按钮时导航到详细信息页面时保留搜索参数。

为此，我使用“位置”将新项目推送到平台的历史记录中

this.location.go(`/items/${this.category}/${this.color}/`);

将其放置在路由模块中：

{ path: 'items/:category/:color/', component: ItemsComponent}
{ path: 'items', component: ItemsComponent}

然后我使用路由查看是否有参数：

const category = this.route.snapshot.paramMap.get('category');
const locations = this.route.snapshot.paramMap.get('color');