angular-routing - 使用路由器商店在效果模块中导航时如何获得激活的路由？

Question

我正在尝试调度相对于组件路由的路由器存储导航操作。路由的跟踪日志显示导航所采用的相对路径是应用程序路径而不是组件路径。

 return of(
        new routerActions.Go({
          path: ['./', payload.rootPath],
          extras: { relativeTo: this.route },
        }),
      );

 constructor(
    private actions$: Actions,
    private route: ActivatedRoute,
  ) {}

我ActivatedRoute在我的效果模块构造函数中注入了这似乎是这里的问题。如何在我的组件之外获取激活的路由并将其传递给导航操作？

Answer 1

ActivatedRoute 特定于每个路由组件。

这为您提供了几个选择。

1. 导航根路由以返回您需要的数据。

let route = this.router.routerState.root;
while (route.firstChild) {
route = route.firstChild;
}

return route.snapshot;

2. 从包中的路由组件传递 ActivatedRoute。

  constructor(private store: Store<AppState>, private activatedRoute:ActivatedRoute) {}

  doSomething() {
    this.store.dispatch(new Action.YourAction({ id: actionId, route: activatedRoute });
  }
  
 

Answer 2

通过activateRoute对我不起作用。这就是我所做的。选择器selectRouterUrl从状态中选择当前 URL。

  navigateRelative$ = createEffect(() => this.actions$.pipe(
    ofType(navigateRelativeTo),
    withLatestFrom(this.store.select(selectRouterUrl)),
    tap(([{ commands }, url]) => this.router.navigate([url, ...commands])),
  ), { dispatch: false });