如何替换活动路由中的路由参数

Question

我有以下路线

{
    path: ':teamId/sample',
    component: SampleComponent
}

假设我目前在路线 10/sample，我如何使用路由器导航到 x/sample，其中值 x 是动态获取的（可观察的订阅等） .

如果我必须替换活动的查询参数 URL 我会简单地做

this.router.navigate([], {
    queryParams: { // updated params },
    queryParamsHandling: 'merge',
});

但是如何使用路由参数实现同样的效果？

编辑： 我有一堆这样的路线，路线参数并不总是路线的第一部分，它甚至可以像 /xyz/abc/:teamId/foo ，我正在寻找一个也能处理此类情况的通用解决方案。

Stackblitz

Answer 1

这应该可以解决问题：

this.randomNumberService.data$.subscribe(random => {
  const snaphsot = this.activatedRoute.snapshot.pathFromRoot;

  this.router.navigate(snaphsot.slice(1).map(s => {
    if (s.routeConfig.path === ':teamId') {
      return random;
    }
    return s.url.join('/');
  }), {preserveQueryParams: true})
});

重要提示：

对于此解决方案，您必须将 ':teamId' 路径配置为它自己的段，例如：

{
    path: ':teamId',
    children: [
      {path: 'after', component: SampleComponent}
    ]
  },

否则检查 s.routeConfig.path === ':teamId' 将解析为 false。

如何替换活动路由中的路由参数

How to replace route parameters in active route

angular

angular-router

Stackblitz

Stackblitz