Angular2子模块的forChild()路由覆盖根路由
问题描述:
当使用loadChildren()调用导入子路由时,我遇到了覆盖根路由的问题。Angular2子模块的forChild()路由覆盖根路由
应用路线声明:
const routes: Routes = [
{ path: '', redirectTo: 'own', pathMatch: 'full' },
{ path: 'own', component: OwnComponent },
{ path: 'nested', loadChildren:() => NestedModule},
];
export const routing = RouterModule.forRoot(routes);
嵌套子模块的路线:
const routes: Routes = [
{ path: 'page1', component: NestedPage1Component },
{ path: 'page2', component: NestedPage2Component },
{ path: '', redirectTo: 'page1', pathMatch: 'full' },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class Module1RoutingModule {}
我可以/自己,/嵌套/第1页,/嵌套/第2页,但是当我试图让根/ - 我正在重定向到/ page1。为什么会发生这种情况,因为它是在RouterModule.forChild的子模块中声明的,它如何不重定向到/ own?
我创建简单的普拉克摄制 - https://plnkr.co/edit/8FE7C5JyiqjRZZvCCxXB?p=preview
是否有人经历了这种行为?
答
这是你的分叉和修改plunker:https://plnkr.co/edit/XilkY55WXle2hFF0Pelx?p=preview
不要导入延迟加载的模块,并改变root的路线是这样的:
//import { Module1Module } from "./module1/module1.module"; // do NOT import it !
export const routes: Routes = [
{ path: '', redirectTo: 'own', pathMatch: 'full' },
{ path: 'own', component: OwnComponent },
{ path: 'module1', loadChildren: 'src/module1/module1.module#Module1Module' },
];
和嵌套的路线:
const routes: Routes = [
//{ path: 'page1', component: Module1Page1Component },
//{ path: 'page2', component: Module1Page2Component },
//{ path: '', redirectTo: 'page1', pathMatch: 'full' },
// do the routes like this..
{
path: '',
component: Module1Component,
children: [
{ path: '', redirectTo: 'page1', pathMatch: 'full' },
{ path: 'page1', component: Module1Page1Component },
{ path: 'page2', component: Module1Page2Component }
]
},
];
对于其他人来说,[这个github问题](https://github.com/angular/angular/issues/10958)讨论了这种路由行为。 – makman99