angular - 在 Angular 5 中，刷新当前路由会重定向到父路由

Question

我的 Angular 5 路由配置如下:

  {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,
  }

我有一个用于在更改某些过滤器/分页/顺序参数时重新加载当前页面的代码，如下所示:

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
  })
}

每次分页或过滤参数更改时都会调用方法changeFilterRoute()，并且应该重新加载当前页面。但它不是重新加载当前页面，而是将用户重定向到父路径。

例如我在路线上

malls/{:mallId}/point-sales

其中 mallId 只是一个数字。然后我更改任何分页/过滤参数，调用的方法 changeFilterRoute() ，并且意外地该方法将我重定向到它的父路由:

malls/:id

使用MallResolve处理。 请帮助我理解我做错了什么？

Answer 1

问题出在调用router.navigate 您应该像这样从 route.snapshot.url 的 urlSegments 中提取路径字符串

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