angular - ngrx/router-store - 路由参数选择器为子路由返回 undefined

Question

我有这个路由设置:

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,
      },
    ],
  },
];

我需要能够获得 friendlyUrl在树中的每个组件中都有 ngrx 选择器。所以我定义如下:

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");

它确实在“PARENT”级别组件(路由)上工作。这意味着当用户访问 edit/some-concert 时选择器返回 一些音乐会 .但是对于/edit/some-concert/edit/songs/1 (在子组件中)它返回 undefined .我不知道为什么。

我都试过了 routerState: RouterState.Minimal和 routerState: RouterState.Full .结果一样。

我可以尝试哪些新事物？

Answer 1

对于那些在网上寻找解决方案的人，我找到了在另一个 SO 线程上编写自定义选择器的替代方法。
在 app-routing.module.ts

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

解决问题的原始答案:https://stackoverflow.com/a/51817329/5775417