Question

我有以下路线

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

比方说，我目前在10/sample路线上，如何使用路由器导航到x/sample，在那里动态获取值x（可观察的订阅等）。 / p>

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

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

但是如何使用Route params实现相同的功能？

编辑：我有很多这样的路线，路线参数并不总是路线的第一部分，它甚至可能像/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。

如何在活动路径中替换路径参数

Stackblitz

1 个答案:

Stackblitz