使用多个模块/文件的Login页面和主视图(带嵌套视图)的Angular.io路由

Question

使用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路由文档和这些建议来使它工作正常,但我无法弄清楚最后一点是搞砸了.我真的很感激任何帮助!

Answer 1

我解决了各种问题,并将其添加到下面的演示中.

1. 不要将延迟加载的模块导入应用程序模块,因为这会导致它们立即加载.这也使模块路由优先于AppModule路由.

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    AuthModule,
    // ClubModule,
    // MainNavModule,
    // MembersModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 延迟加载的模块应该都具有自己的应用程序,因此应该配置路由,以便每个模块的根组件具有空路径.

// club-routing.module.ts
const routes: Routes = [
  { path: '',  component: ClubComponent }
];

// members-routing.module.ts
const routes: Routes = [
  {
    path: '',
    component: MembersComponent,
    canActivate: [AuthGuard],
    children: [
      { path: ':id', component: MemberDetailComponent }
    ]
  }
];

3. 最后,应用程序模块应具有路由器要解析的默认路径.在我的示例中,我将其解析为路由模块,因为它受到保护的保护,但您可以轻松地将其路由到登录模块.

// app-routing.module.ts
const routes: Routes = [
  { path: '', loadChildren: 'app/main-nav.module#MainNavModule' },
  { path: 'login', component: LoginComponent },
  { path: '**', component: PageNotFoundComponent }
];

演示