angular - NgRx - 无法从 CustomSerializer 路由器商店访问的多级路由参数

Question

我有一条声明如下的路径:

{
  path: 'app/:userId',
  children: [...AppChildrenRoutes]
}

然后，在 AppChildrenRoutes 中

{ path: 'feature', component: MainFeatureComponent }

因此，在我的应用程序的某个时刻，我可以拥有 localhost:4200/app/123/feature。在此组件内，通过一些操作，我可以像这样导航到另一条路线:

this.router.navigate([
  'app',
  this.userId,
  'feature',
  { search: this.searchFor }
]);

将其视为正在改变架构的大型企业级应用程序，逐步使用 NgRx。
所以，我遇到了 Router Store 的问题。我已经设置好一切，一切正常。
关注路由器专卖店docs我写了一个 Custom Serializer，它看起来像这样

serialize(routerState: RouterStateSnapshot): RouterStateUrl {
  const { url } = routerState;
  const queryParams = routerState.root.queryParams;

  while (route.firstChild) {
    route = route.firstChild;
  }
  const params = route.params;

  return { url, queryParams, params };
}

我发现，考虑像这样的 URI

localhost:4200/app/123/feature;search=blue

route.params 只返回 search 参数，而不是 userId 和 search。

- 如何实现从路径返回所有 params 的 CustomSerializer？ (在本例中，userId 和 search)。

我有点尝试但失败了，while 循环的每次迭代，检查是否有参数并将它们添加到对象直到最后一个。好的，好的还是坏的方法？我怎样才能做到这一点而不失败呢？
谢谢。

Answer 1

我遇到了类似的问题，并在每次执行循环时通过扩展 params 对象解决了这个问题。

我的 CustomSerializer 现在看起来像这样:

export class CustomSerializer implements RouterStateSerializer<RouterStateUrl> {
serialize(routerState: RouterStateSnapshot): RouterStateUrl {
    let route = routerState.root;

    let params = {};
    while (route.firstChild) {
        params = {
            ...params,
            ...route.params
        };
        route = route.firstChild;
    }

    const {
        url,
        root: { queryParams }
    } = routerState;

    return { url, params, queryParams };
}