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

我有一个代码，用于在更改一些 filter/paging/order 参数时重新加载当前页面，如下所示：

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 只是一个数字。然后我更改任何 paging/filtering 参数，方法 changeFilterRoute() 被调用，并且不小心该方法将我重定向到它的父路由：

malls/:id

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

Answer 1

试试这个

 constructor(public router: Router, private route: ActivatedRoute,) {}
 ...

 this.router.navigate(['.'], {queryParams: queryParams,  relativeTo: this.route});

Answer 2

问题出在调用router.navigate 您应该像这样

从 route.snapshot.url 的 urlSegments 中提取路径字符串

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

在 Angular 5 中刷新当前路由重定向到父路由

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

angular-routing

angular

angular-router

angular5

angular-resolver