angularngrxngrx-storengrx-router-store

ngrx/router-store - route parameter selector returns undefined for the child route


I have this routing set up:

const SONGS_ROUTES = [
  {
    path: "songs",
    children: [
      // ...
      {
        path: "edit/:id",
        component: PerformancesComponent, // CHILD ROUTE
      },
      {
        path: "",
        component: PerformancesComponent,
      },
    ],
  },
];

const routes: Routes = [
  {
    path: "",
    component: ConcertsComponent,
    children: [
      {
        path: "edit/:friendlyUrl",
        component: ConcertEditComponent,   // PARENT route
        children: SONGS_ROUTES,
      },
    ],
  },
];

and I need to be able to get friendlyUrl with ngrx selectors in every component in the tree. So I defined it as follows:

export const routerFeatureKey = "router";

export const selectRouterState = createFeatureSelector<
  fromRouter.RouterReducerState
>(routerFeatureKey);

export const {
  selectCurrentRoute, // select the current route
  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
} = fromRouter.getSelectors(selectRouterState);

export const getSelectedConcertFriendlyUrl = selectRouteParam("friendlyUrl");

It does work at the "PARENT" level component (route). Which means when a user goes to edit/some-concert the selector returns some-concert. But for the /edit/some-concert/edit/songs/1 (in the child component) it returns undefined. And I have no idea why.

I tried both routerState: RouterState.Minimal and routerState: RouterState.Full. Same result.

What new things can I try?


Solution

  • For those crawling the net for a solution to this, I found an alternative to writing a custom selector on another SO thread.

    in app-routing.module.ts

    @NgModule({
        imports: [RouterModule.forRoot(routes, {
            paramsInheritanceStrategy: 'always' <---- the important part
        })],
        exports: [RouterModule]
    })
    

    Original answer that solved the question: https://stackoverflow.com/a/51817329/5775417