从 Angular 中的详细信息页面导航回来后保持搜索页面的状态 [英] Maintain state of Search page after navigating back from details page in Angular

问题描述

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

I'm new to angular and I have a requirement to maintain the state of the search results page(i.e preserve the sort and filter values of the search results grid) when the user navigates to the details page by clicking on a link in search results grid and navigates back to the search page again. I tried using CustomReuseStartegy but I'm facing 2 issues:

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

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

It would be great if someone can give insights on how and when to reattach the components using route reuse strategy or a different solution to handle my requirement.

推荐答案

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

I wanted to preserve the search parameters when navigating to a details page only for when the user presses the back button.

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

For this, I used Location to push a new item to the platform's history

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

把它放在路由模块中:

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

然后我用路由看有没有参数:

Then I used the route to see if there were parameters:

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

这篇关于从 Angular 中的详细信息页面导航回来后保持搜索页面的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！