Angular 两个具有相同路径的模块答案

【问题标题】：Angular two modules with the same pathAngular 两个具有相同路径的模块
【发布时间】：2018-06-05 18:21:45
【问题描述】：

我的应用中有两个模块：HomeModule 和 LoginModule。
我希望能够在同一路径中加载两个不同的模块。加载哪个模块取决于用户是否登录。
如果用户已登录，HomeModule 应该为他加载，如果没有 - LoginModule 应该加载。

我尝试了这段代码，控制台没有错误，HomeModule 如果用户登录则加载，但如果用户未登录 - 没有加载。如果我颠倒路线的顺序，LoginModule 有效，而 HomeModule 无效。

HomeGuard.canLoad() 返回如果用户已登录，则为 true，如果用户未登录，LoginGuard.canLoad() 返回 true。

HomeGuard.canLoad:

if (this.userSessionService.userSession) {
    return true;
}
this.router.navigate(['./']);
return false;

LoginGuard.canLoad:

if (this.userSessionService.userSession) {
    this.router.navigate(['./']);
    return false;
}
return true;

我的路线：

{ path: '', loadChildren: './home/index#HomeModule', canLoad: [HomeGuard] },
{ path: '', loadChildren: './login/index#LoginModule', canLoad: [LoginGuard]}

它应该像 Facebook 网络应用程序中的主路由一样工作。如果我去 facebook.com 如果我没有登录，我会看到登录页面，如果我登录，我会看到应用程序作为登录用户。

【问题讨论】：

标签： angular angular-ui-router

【解决方案1】：

canLoad 阻止子加载，但不阻止父匹配路由。

您可以尝试改用 URL matcher。这里唯一的问题是匹配器只是一个函数。您可能希望根据服务中的状态返回 true 或 false。作为一种临时方法，您可以尝试使用全局变量作为标志，看看使用匹配器是否有帮助。

如果匹配器有效，那么我将使用解析器将路由包装在父路由中。解析器会将用户状态分配给匹配器使用的全局变量。

 {
    path: '',
    resolver: { ignore: ResolveUserStateForMatcher },
    children: [
         { matcher: MatchHomeRoute, loadChildren: './home/index#HomeModule' },
         { matcher: MatchLoginRoute, loadChildren: './login/index#LoginModule' }
    ]
 }

这里的重点是，当用户登录时，匹配器会阻止路由器为HomeModule 执行任何逻辑。这与不加载模块相同。

我不确定这些的 MatchResult 应该是什么。

【讨论】：