从 Angular 的详细信息页面返回后保持搜索页面的状态

Question

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

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

如果有人可以就如何以及何时使用路由重用策略或不同的解决方案来处理我的要求来重新附加组件提供见解，那就太好了。

Answer 1

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

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

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

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

对于 Angular 2+ click here.

Answer 2

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

为此，我使用 Location 将新项目推送到平台的历史记录

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');