小编She*_*i M的帖子

使用Angular 4的路由和我的功能的单独文件/模块,我试图让我的应用程序始终首先显示登录屏幕,然后在用户登录后切换到我的主视图(所有路由都通过身份验证保护,除了登录一个).

我在Plunker中创建了一个测试应用程序,在应用程序中有关于我需要的功能的注释,而不是目前正在发生的事情:https: //plnkr.co/edit/MGIGH4xpKZOtgCBl5lam

我对大多数示例代码(如此代码)所遇到的问题是,登录后路由到的组件没有任何嵌套视图.我通过将所有路由放在一个文件中来使我的应用程序工作,但我更喜欢拆分每个功能的路由.然而,一旦我这样做,事情开始变得不稳定:

• 单击登录按钮会显示俱乐部组件,而不会嵌套在主导航模板中; 加上俱乐部组件即使在认证完成之前也会显示.
• 如果我通过在URL中键入"members"来手动导航,则成员列表会正确显示,但是当我单击某个成员时,它会显示"找不到页面"而不是成员详细信息视图

但它很接近 - 在网址中输入"club"或"members"将强制显示登录页面,当我点击登录按钮时,它将显示正确的页面,嵌套在主导航视图中.然后我可以使用主导航链接在"俱乐部"和"成员"之间来回翻转并注销.

我认为问题可能与我正在进行延迟加载的方式有关吗？

const routes: Routes = [
  { path: '', component: MainNavComponent,
    canActivate: [AuthGuard],
    children: [
      { path: 'club', loadChildren: 'app/club.module#ClubModule'},
      { path: 'members', loadChildren: 'app/members.module#MembersModule'},
      { path: '', redirectTo: 'club', pathMatch: 'full' }
    ]
  }
];

我按照angular.io路由文档和这些建议来使它工作正常,但我无法弄清楚最后一点是搞砸了.我真的很感激任何帮助!