router.selectors.ts

router.selectors.ts

const getFlattenedParentRouteParams = (route: ActivatedRouteSnapshot) => {
  if (!route.parent) {
    return route.params;
  }

  const parentRouteParams = getFlattenedParentRouteParams(route.parent);
  return {
    ...route.params,
    ...parentRouteParams,
  };
};

const getFlattenedChildRouteParams = (route: ActivatedRouteSnapshot) => {
  if (route.children.length === 0) {
    return route.params;
  }

  const combinedChildParams = route.children.reduce(
    (prev, childRoute) => ({
      ...prev,
      ...getFlattenedChildRouteParams(childRoute),
    }),
    {}
  );
  return {
    ...route.params,
    ...combinedChildParams,
  };
};

export const selectRouteParams = createSelector(selectRouter, (routerState) => {
  if (!routerState?.state?.root) {
    return {};
  }

  return {
    ...getFlattenedChildRouteParams(routerState.state.root),
    ...getFlattenedParentRouteParams(routerState.state.root),
  };
});

export const selectRouteParam = (routeParam: string) =>
  createSelector(selectRouteParams, (routeParams) => {
    return routeParams[routeParam];
  });