feat(router-store): add selectParamFromRouterState selector (#2771)

Closes #2758

Author: markostanimirovic

modules/router-store/spec/router_selectors.spec.ts

@@ -18,9 +18,13 @@ const mockData = {
       },
       fragment: null,
       firstChild: {
-        params: {},
+        params: {
+          p: 'first-occurrence',
+        },
         paramMap: {
-          params: {},
+          params: {
+            p: 'first-occurrence',
+          },
         },
         data: {},
         url: [
@@ -42,10 +46,12 @@ const mockData = {
         firstChild: {
           params: {
             id: 'etyDDwAAQBAJ',
+            p: 'second-occurrence',
           },
           paramMap: {
             params: {
               id: 'etyDDwAAQBAJ',
+              p: 'second-occurrence',
             },
           },
           data: {
@@ -182,6 +188,15 @@ describe('Router State Selectors', () => {
       );
     });
 
+    it('should create a selector for selecting the first occurrence of a specific route param', () => {
+      const result = selectors.selectParamFromRouterState('p')(state);
+
+      expect(result).toEqual(state.router.state.root.firstChild.params.p);
+      expect(result).not.toEqual(
+        state.router.state.root.firstChild.firstChild.params.p
+      );
+    });
+
     it('should create a selector for selecting the route data', () => {
       const result = selectors.selectRouteData(state);
 

modules/router-store/src/models.ts

@@ -8,6 +8,9 @@ export interface RouterStateSelectors<V> {
   selectQueryParam: (param: string) => MemoizedSelector<V, string | undefined>;
   selectRouteParams: MemoizedSelector<V, Params>;
   selectRouteParam: (param: string) => MemoizedSelector<V, string | undefined>;
+  selectParamFromRouterState: (
+    param: string
+  ) => MemoizedSelector<V, string | undefined>;
   selectRouteData: MemoizedSelector<V, Data>;
   selectUrl: MemoizedSelector<V, string>;
 }

modules/router-store/src/router_selectors.ts

@@ -41,6 +41,21 @@ export function getSelectors<V>(
   );
   const selectRouteParam = (param: string) =>
     createSelector(selectRouteParams, (params) => params && params[param]);
+  const selectParamFromRouterState = (param: string) =>
+    createSelector(selectRouterState, (routerState) => {
+      let paramValue: string | undefined;
+      let route = routerState?.root;
+
+      while (route?.firstChild) {
+        route = route.firstChild;
+        if (route?.params?.[param]) {
+          paramValue = route.params[param];
+          break;
+        }
+      }
+
+      return paramValue;
+    });
   const selectRouteData = createSelector(
     selectCurrentRoute,
     (route) => route && route.data
@@ -57,6 +72,7 @@ export function getSelectors<V>(
     selectQueryParam,
     selectRouteParams,
     selectRouteParam,
+    selectParamFromRouterState,
     selectRouteData,
     selectUrl,
   };

projects/ngrx.io/content/guide/router-store/selectors.md

@@ -25,14 +25,15 @@ export const selectRouter = createFeatureSelector<
 >('router');
 
 export const {
-  selectCurrentRoute,   // select the current route
-  selectFragment,       // select the current route fragment
-  selectQueryParams,    // select the current route query params
-  selectQueryParam,     // factory function to select a query param
-  selectRouteParams,    // select the current route params
-  selectRouteParam,     // factory function to select a route param
-  selectRouteData,      // select the current route data
-  selectUrl,            // select the current url
+  selectCurrentRoute,         // select the current route
+  selectFragment,             // select the current route fragment
+  selectQueryParams,          // select the current route query params
+  selectQueryParam,           // factory function to select a query param
+  selectRouteParams,          // select the current route params
+  selectRouteParam,           // factory function to select a route param
+  selectParamFromRouterState, // factory function to select the first occurrence of a route param
+  selectRouteData,            // select the current route data
+  selectUrl,                  // select the current url
 } = fromRouter.getSelectors(selectRouter);
 
 export const selectSelectedCarId = selectQueryParam('carId');