使用路由器存储在有效模块中导航时如何获得激活的路由?
How can I get activated route when navigation in effect module using the router store?
我正在尝试调度与组件路由相关的路由器存储导航操作。路由的跟踪日志显示导航采用的相对路径是应用程序路径而不是组件路径。
return of(
new routerActions.Go({
path: ['./', payload.rootPath],
extras: { relativeTo: this.route },
}),
);
constructor(
private actions$: Actions,
private route: ActivatedRoute,
) {}
我正在我的效果模块构造函数中注入 ActivatedRoute
,这似乎是问题所在。如何在我的组件外部获取激活的路由并将其传递给导航操作?
ActivatedRoute 特定于每个路由组件。
这给了你几个选择。
- 将根路由导航到 return 您需要的数据。
let route = this.router.routerState.root;
while (route.firstChild) {
route = route.firstChild;
}
return route.snapshot;
- 从包中的路由组件传递 ActivatedRoute。
constructor(private store: Store<AppState>, private activatedRoute:ActivatedRoute) {}
doSomething() {
this.store.dispatch(new Action.YourAction({ id: actionId, route: activatedRoute });
}
传递 activatedRoute 对我不起作用。这就是我所做的。选择器selectRouterUrl从状态URL中选择当前
navigateRelative$ = createEffect(() => this.actions$.pipe(
ofType(navigateRelativeTo),
withLatestFrom(this.store.select(selectRouterUrl)),
tap(([{ commands }, url]) => this.router.navigate([url, ...commands])),
), { dispatch: false });
我正在尝试调度与组件路由相关的路由器存储导航操作。路由的跟踪日志显示导航采用的相对路径是应用程序路径而不是组件路径。
return of(
new routerActions.Go({
path: ['./', payload.rootPath],
extras: { relativeTo: this.route },
}),
);
constructor(
private actions$: Actions,
private route: ActivatedRoute,
) {}
我正在我的效果模块构造函数中注入 ActivatedRoute
,这似乎是问题所在。如何在我的组件外部获取激活的路由并将其传递给导航操作?
ActivatedRoute 特定于每个路由组件。
这给了你几个选择。
- 将根路由导航到 return 您需要的数据。
let route = this.router.routerState.root;
while (route.firstChild) {
route = route.firstChild;
}
return route.snapshot;
- 从包中的路由组件传递 ActivatedRoute。
constructor(private store: Store<AppState>, private activatedRoute:ActivatedRoute) {}
doSomething() {
this.store.dispatch(new Action.YourAction({ id: actionId, route: activatedRoute });
}
传递 activatedRoute 对我不起作用。这就是我所做的。选择器selectRouterUrl从状态URL中选择当前
navigateRelative$ = createEffect(() => this.actions$.pipe(
ofType(navigateRelativeTo),
withLatestFrom(this.store.select(selectRouterUrl)),
tap(([{ commands }, url]) => this.router.navigate([url, ...commands])),
), { dispatch: false });