Refreshing the current route redirects to parent route instead in Angular 5

Question

I have Angular 5 routs configured as follows:

  {path: 'malls', component: MallsComponent},
  {
    path: 'malls/new', component: MallEditComponent,
    resolve: {body: MallResolve}
  },
  {
    path: 'malls/:id', component: MallEditComponent,
    resolve: {body: MallResolve}
  },
  {
    path: 'malls/:mallId/point-sales', component: MallPointSalesComponent,
  }

I have a code for reloading current page on change some filter/paging/order params which looks like:

private changeFilterRoute() {
  let queryParams = {
    'sorter.sortOrder': this.sort.active,
    'sorter.direction': this.sort.direction,
    'page': this.paginator.pageIndex,
    'pageSize': this.paginator.pageSize
  };

  this.router.navigate(this.route.snapshot.url, {
    queryParams: queryParams
  })
}

The method changeFilterRoute() invoked each time the paging or filtering parameter changed, and it is supposed to reload current page. But instead of reloading current page it redirects user to parent path.

For example I'm on the route

malls/{:mallId}/point-sales

Where mallId is just a number. Then I change any of paging/filtering params, the method changeFilterRoute() invoked, and accidentally the method redirects me to it's parent route:

malls/:id

with MallResolve processing. Please help me to understand what I did wrong?

Answer 1

The problem is in invoking router.navigate You should extract path strings from urlSegments from route.snapshot.url like this

this.router.navigate(this.route.snapshot.url.map(urlSegment => urlSegment.path), {
    queryParams: queryParams
});