[英]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.并且我需要能够在树中的每个组件中使用 ngrx 选择器获取
friendlyUrl
的 URL。 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 .这意味着当用户去
edit/some-concert
时,选择器返回some-concert 。 But for the /edit/some-concert/edit/songs/1
(in the child component) it returns undefined
.但是对于
/edit/some-concert/edit/songs/1
(在子组件中),它返回undefined
。 And I have no idea why.我不知道为什么。
I tried both routerState: RouterState.Minimal
and routerState: RouterState.Full
.我尝试了
routerState: RouterState.Minimal
和routerState: RouterState.Full
。 Same result.结果相同。
What new things can I try?我可以尝试哪些新事物?
For those crawling the net for a solution to this, I found an alternative to writing a custom selector on another SO thread.对于那些在网上寻找解决方案的人,我找到了在另一个 SO 线程上编写自定义选择器的替代方法。
in app-routing.module.ts
在
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解决问题的原始答案: https://stackoverflow.com/a/51817329/5775417
To workaround this I created my own selector:为了解决这个问题,我创建了自己的选择器:
export const getSelectedConcertFriendlyUrl = createSelector(
selectUrl,
(url) => {
const extractRegex = /\/concerts\/edit\/([a-zA-Z0-9_-]+)\/?.*/gi;
const matches = extractRegex.exec(url);
if (matches && matches.length > 1 && matches[1]) {
return matches[1];
}
return undefined;
}
);
It's doesn't include all edge cases for now, so I'll have improve it.它现在不包括所有边缘情况,所以我会改进它。
And then @brandonroberts kindly replied on Twitter that:然后@brandonroberts 在 Twitter 上回复说:
The selectors for router-store traverse down to the lowest active route in the tree, which is why you won't get that parameter.
router-store 的选择器向下遍历到树中最低的活动路由,这就是您不会获得该参数的原因。 If you need to all the params in the tree, you need a custom selector.
如果您需要树中的所有参数,则需要一个自定义选择器。
So yes, you have to create your own selector.所以是的,您必须创建自己的选择器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.