我们目前正在使用Angular 6构建管理应用程序。我们刚刚起步,但希望尽早应用最佳实践,并希望使用最适合我们的最佳结构和模块。为此,我们决定使用RouterModule.forRoot
和RouterModule.forChild
处理每个模块的路由(不想有一个single肿的单个文件)。
作为管理员,我们希望所有应用程序都受到保护(使用Guard)。但是,在路由模块化方面,我们面临着有关父路由和子路由的问题。
比方说,我们有一个主要的AppRoutingModule
,其中包含以下内容:
const appRoutes: Routes = [
{
path: '',
component: LayoutComponent,
canActivate: [AuthGuard],
children: []
},
{ path: 'oauth/callback', component: AuthComponent }
];
@NgModule({
declarations: [
AuthComponent
],
exports: [
RouterModule
],
imports: [
RouterModule.forRoot(appRoutes)
]
})
export class AppRoutingModule {}
现在假设我们还有另一个模块,UsersRoutingModule
,其中包含:
const usersRoutes: Routes = [
{
path: '/users',
component: UsersComponent
}
];
@NgModule({
exports: [
RouterModule
],
imports: [
RouterModule.forChild(usersRoutes)
]
})
export class UsersRoutingModule {}
我们如何在上述模块中定义路由,就等同于此:
[
{
path: '',
component: LayoutComponent,
canActivate: [AuthGuard],
children: [
{ path: 'users', component: UsersComponent }
]
},
{ path: 'oauth/callback', component: AuthComponent }
]
答案 0 :(得分:0)
您好,您做得对,所以请放心,最佳实践(据我所知)是将每个更大的(逻辑连接)代码块分隔在一个单独的模块中(例如-administration.module
, dashboard.module
,shopping-cart.module
,...)。每个模块必须具有其自己的路由模块(例如您发布的第二个片段),并且所有这些模块都必须延迟加载到其父级路由模块中。
// App.module
//** Some imports */
@NgModule({
imports: [
...
AppRoutingModule,
...
],
declarations: [
...
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
// App.routing-module
//** Some imports */
const appRoutes: Routes = [
// Lazy loaded module
{
path: 'crisis-center',
loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
}
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule],
providers: [CanDeactivateGuard]
})
export class AppRoutingModule {}
//** crisis-center.module/
//** Some imports */
@NgModule({
imports: [
...
CrisisCenterRoutingModule,
...
],
declarations: [
...
],
})
export class CrisisCenterModule {}
//** crisis-center.routing
//** Some imports */
const crisisCenterRoutes: Routes = [
{
path: '',
component: Some-wrap-component,
children: [
{
path: '',
component: Some-component
}
]
}
];
@NgModule({
imports: [
RouterModule.forChild(crisisCenterRoutes)
],
exports: [
RouterModule
],
})
export class CrisisCenterRoutingModule { }
如果您的Admin.module
非常大,则可以将其形式的逻辑分离到更多模块中,例如(manage-users.module
,manage-projects.module
,...),然后再次使用惰性加载策略。
P.S。大部分代码来自Angular Docs,希望对您有所帮助,如果您想实施所有最佳路由实践,也建议您考虑使用不同的preloadingStrategy
:)