这个问题通常会在定义Angular导航时遇到,因为同时启用子路由和loadChildren会导致冲突。
子路由可以使用以下方式定义:
const routes: Routes = [
{
path: 'parent',
component: ParentComponent,
children: [
{ path: 'child', component: ChildComponent }
]
}
];
而loadChildren则需要在定义模块时使用,其定义方式如下:
const routes: Routes = [
{ path: 'lazy', loadChildren: 'app/lazy.module#LazyModule' }
];
解决这个问题的方法是使用Angular提供的一个功能模块 —— Router Module。该模块可以在NgModule中引入并配置,以允许使用子路由和loadChildren。配置代码示例如下:
const routes: Routes = [
{
path: 'parent',
component: ParentComponent,
children: [
{ path: 'child', component: ChildComponent }
]
},
{
path: 'lazy',
loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
这里需要注意的是,在使用loadChildren时不能使用字符串,而是要使用动态导入的方法。这样不仅可以避免冲突,还具有更好的性能。