Keep Query Params for Specific Routes on Navigation

🚀 feature request

Relevant Package

@angular/router

Description

I have an application with two pages:

1. First, URL of which could contain query params, which represent current tab, sorting and pagination. E.g. /first?tab=cats&sortBy=age&sortOrder=asc&pageIndex=3&pageSize=25.
2. Second, URL of which shouldn’t contain query params. E.g. /second.

When I navigate from First to Second, query parameters are removed as expected, since I don’t use queryParamsHandling.

Though, when I navigate back from Second to First, query parameters aren’t restored. This behavior is also expected, but I’d like to have a route configuration option to keep them.

The intention behind this in my case is that user should see the same filtered data set as he did before navigation, so he doesn’t need to set tab, sorting and pagination again manually.

I tried to achieve similar behavior by providing user a button, which simulates browser Back via window.history.back() and Angular built-in Location.back(). Unfortunately, both suffer from duplicated history records issue, so user has to click the button several times to actually go back, which is unacceptable from UX perspective.

I also found the following solutions, but neither of them work as needed.

• https://medium.com/@timofeybm/3-methods-to-save-catalogue-state-and-scroll-position-in-angular-1a46ae4eadca (method 3)
• https://www.angulararchitects.io/aktuelles/sticky-routes-in-angular-2-3/
• https://github.com/angular/angular/issues/16845

Describe the solution you’d like

// app-routing.module.ts
{
  path: 'first',
  component: FirstComponent,
  keepQueryParams: true
},
{
  path: 'second',
  component: SecondComponent
}

Describe alternatives you’ve considered

The only alternative I see is manually subscribe to route change, keep query parameters in shared service and restore them when needed.

[Halfist]

@Airblader Then probably keepQueryParams should be replaced with queryParamsStrategy: 'clean' | 'cache' | 'preserve' | 'merge' with 'clean' as default.

@atscott Yes, via router.navigate() or <a [routerLink]="first"> click.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}