diff --git a/modules/router-store/spec/router_selectors.spec.ts b/modules/router-store/spec/router_selectors.spec.ts index 1a80b8ee24..6ccaa4c3b8 100644 --- a/modules/router-store/spec/router_selectors.spec.ts +++ b/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); diff --git a/modules/router-store/src/models.ts b/modules/router-store/src/models.ts index 2acdcc4018..ab2352c266 100644 --- a/modules/router-store/src/models.ts +++ b/modules/router-store/src/models.ts @@ -8,6 +8,9 @@ export interface RouterStateSelectors { selectQueryParam: (param: string) => MemoizedSelector; selectRouteParams: MemoizedSelector; selectRouteParam: (param: string) => MemoizedSelector; + selectParamFromRouterState: ( + param: string + ) => MemoizedSelector; selectRouteData: MemoizedSelector; selectUrl: MemoizedSelector; } diff --git a/modules/router-store/src/router_selectors.ts b/modules/router-store/src/router_selectors.ts index 362877cb80..323ac99af0 100644 --- a/modules/router-store/src/router_selectors.ts +++ b/modules/router-store/src/router_selectors.ts @@ -41,6 +41,21 @@ export function getSelectors( ); 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( selectQueryParam, selectRouteParams, selectRouteParam, + selectParamFromRouterState, selectRouteData, selectUrl, }; diff --git a/projects/ngrx.io/content/guide/router-store/selectors.md b/projects/ngrx.io/content/guide/router-store/selectors.md index ca0f7adc60..7cf0f461f2 100644 --- a/projects/ngrx.io/content/guide/router-store/selectors.md +++ b/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');