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

问题描述

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

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.

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

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屋！