Angular Navigation - can't get queryParams removed when navigating to sibling route

Question

I have my routes set u like this

        {
            path: 'events/:eventId/c/:customerId',
            component: CustomerEventComponent,
            children: [
                {
                    path: 'e',
                    component: CustomerExhibitorListComponent,
                },
                {
                    path: 'codes',
                    component: CustomerAccesscodeListComponent,
                },...
        }...

CustomerExhibitorListComponent and CustomerAccesscodeListComponent contain datagrids which stores certain states as queryParams such as sort=NAME_ASC.

The template I use is

        <li>
            <a class="nav-link" routerLink="./e" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">{{ 'HOME.CUSTOMER_SIDENAV.EXHIBITOR_LIST' | translate }}</a>
        </li>
        <li>
            <a class="nav-link" routerLink="./codes" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">{{ 'HOME.CUSTOMER_SIDENAV.EXHIBITOR_ACCESSCODES' | translate }}</a>
        </li>

When I try to switch between these two routes, the entire entire queryParams of the previous route is being kept and I can't reset them.

I've tried playing around with queryParamsHandling and manually setting

[queryParms]="{sort:'...'}"

Nothing works, the old queryparams will only go away when I go to a completely other route.

Finally I've subscribed to the router.events in the parent component and got some interesting logs

NavigationCancel
id: 3
reason: "Navigation ID 3 is not equal to the current navigation id 4"
url: "/home/o7kj72x5uix4ypk6/events/4d462c90-13f7-11e9-95fb-1b4b9f179c1a/c/b9eedf28-13f6-11e9-bb14-373ef19a0c85/e"


NavigationStart
id: 4
navigationTrigger: "imperative"
restoredState: null
url: "/home/o7kj72x5uix4ypk6/events/4d462c90-13f7-11e9-95fb-1b4b9f179c1a/c/b9eedf28-13f6-11e9-bb14-373ef19a0c85/e?offset=0&first=10&sort=NAME_ASC"

Somewhere in between the previous Navigation is being cancel (here the route seems to be correct). Then I have another 2nd Navigation Start with the correct target url

 /home/o7kj72x5uix4ypk6/events/4d462c90-13f7-11e9-95fb-1b4b9f179c1a/c/b9eedf28-13f6-11e9-bb14-373ef19a0c85/e

But with the old Params

?offset=0&first=10&sort=NAME_ASC"

I don't have any Guards or Resolver set up. Any help is highly appreciated!

Anar Sadigli Anar Sadigli · Accepted Answer · 2019-07-22T14:56:08

I also faced with this problem and could not able to find any proper way to solve this issue so I just kinda hacked it. In my case, I am using Angular+Ionic and in Ionic, we have a function called ionViewWillEnter and it is called when view renders each time. So what I did:

Inside the function ionViewWillEnter, I just reset my queryParams without changing the route (see: Angular: How to update queryParams without changing route). Hope this is going to be helpful for your case.

Angular Navigation - can't get queryParams removed when navigating to sibling route

1 Answers