使用多个模块/文件的Login页面和主视图(带嵌套视图)的Angular.io
|
使用Angular 4的路由和我的功能的单独文件/模块,我试图让我的应用程序始终首先显示登录屏幕,然后在用户登录后切换到我的主视图(所有路由都通过身份验证保护,除了登录一个).
我在Plunker中创建了一个测试应用程序,在应用程序中有关于我需要的功能的注释,而不是目前正在发生的事情： 我在大多数示例代码(like this one)中遇到的问题是登录后路由到的组件没有任何嵌套视图.我通过将所有路由放在一个文件中来使我的应用程序工作,但我更喜欢拆分每个功能的路由.然而,一旦我这样做,事情开始变得不稳定： >单击登录按钮可显示俱乐部组件,而不会嵌套在主导航模板中;加上俱乐部组件即使在认证完成之前也会显示. 但它很接近 – 在网址中输入“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路由文档和these suggestions来使它工作正常,但我无法弄清楚最后一点是搞砸了.我真的很感激任何帮助！ 解决方法
我解决了各种问题,并将其添加到下面的演示中.
>不要将延迟加载的模块导入应用程序模块,因为这会导致它们立即加载.这也使模块路由优先于AppModule路由. @NgModule({
declarations: [
AppComponent,PageNotFoundComponent
],imports: [
BrowserModule,AuthModule,// ClubModule,// MainNavModule,// MembersModule,AppRoutingModule
],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }
>延迟加载的模块应该都像自己的app一样运行,因此应该配置路由,以便每个模块的根组件都有一个空路径. // club-routing.module.ts
const routes: Routes = [
{ path: '',component: ClubComponent }
];
// members-routing.module.ts
const routes: Routes = [
{
path: '',component: MembersComponent,children: [
{ path: ':id',component: MemberDetailComponent }
]
}
];
>最后,应用程序模块应具有路由器要解析的默认路径.在我的示例中,我将其解析为路由模块,因为它受到保护的保护,但您可以轻松地将其路由到登录模块. // app-routing.module.ts
const routes: Routes = [
{ path: '',loadChildren: 'app/main-nav.module#MainNavModule' },{ path: 'login',component: LoginComponent },{ path: '**',component: PageNotFoundComponent }
];
Demo （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |