NgRx

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 的问题。我已经设置好所有内容并且一切正常。
在 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 returns 只有 search 参数，而不是 userId 和 search。

- 如何从路径中实现 returns 全部 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 };
}

}

Answer 2

您可以使用 selector select 任何 parent/child 路由，并且您不需要序列化程序。您有一个根 Route 对象，通过创建 select 或者您可以遍历路由并获取所需的参数。

const selectRouter = createFeatureSelector<XStore,
    fromRouter.RouterReducerState<any>>('router');

export const selectAllRouteParam = (param: string) => createSelector(
    selectRouter,
    (router: RouterReducerState) => {
        let current = router.state.root;

        while (current) {
            if (current.params && current.params[param]) {
                return current.params[param];
            } else {
                current = current.firstChild;
            }
        }
    }
);

使用时可以这样使用：

userId$ = this.store.select(selectAllRouteParam('userId'))

聚会迟到了，但我希望以后有人会觉得这很有帮助。

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

NgRx - Multi level route params not able to access from CustomSerializer Router Store

redux

angular

ngrx-router-store