以角度 2+ 路由到延迟加载模块中的特定页面

Question

我的主应用路由器中有以下内容：

{ path: 'users', loadChildren: 'app/modules/users/users.module#UsersModule', canLoad: [AuthGuard] }

当用户转到http://localhost:4200/users/1234 查看他们的个人资料时，我会尝试保存完整的网址（包括上面的用户 ID），以便在他们登录后返回该页面。

问题是，canLoad函数中的Route参数只有一个path字段，不包含上面的用户ID，只有路径users。有什么办法可以实现吗？

第一次评论后编辑

用户路由模块确实有一个canActivate 保护，但是除了登录组件之外，它永远不会被调用，因为第一个canLoad 返回 false 并将调用者路由到登录组件。

第一次回答后编辑

canLoad(route: Route) {
  if (!AuthService.isAuthenticated()) {
    this.router.events.takeWhile(event => !(event instanceof NavigationCancel))
      .subscribe(event => {
        console.log(event);
        if (event instanceof NavigationCancel) {
          AuthService.setRedirectUrl(event.url);
        }
      });
    return false;
  }
  return true;
}

所以我尝试了上述方法，但我认为我仍然做错了，因为控制台从不记录......我如何在设置存储重定向 URL 后取消订阅或停止接收 NavigationCancel 事件？

Answer 1

由于canLoad 在构建路由器状态期间被调用，它不会获得激活路由和整个路由器状态。它只获取路线。

您可以将路由器注入警卫，订阅NavigationCancel 事件，您可以访问该 URL。

我如何取消订阅或停止接收 NavigationCancel 事件后 设置存储重定向 URL？

由于router.events is a Subject，您可以这样退订：

// get the subscription reference
const subscription = this.router.events.takeWhile(event => !(event instanceof NavigationCancel))
      .subscribe(event => {
        console.log(event);
        if (event instanceof NavigationCancel) {
          AuthService.setRedirectUrl(event.url);
          // use it to unsubscribe
          subscription.unsubscribe(); <----------------------------
        }
      });