导入模块中的Angular 2路由覆盖当前

Question

以下是plunker:https://plnkr.co/edit/WIFNVIEVqls4gXk21Muj

有两个模块都定义了路由.模块2导入模块1以便使用其中的组件.您永远无法导航到模块2.而是加载模块1.

模块1路由:

const routes: Routes = [
  { path: '', component: Module1Component }
];

模块2路由:

const routes: Routes = [
  { path: '', component: Module2Component }
];

应用路由:

const routes: Routes = [
  { path: 'module1', loadChildren: 'app/module1/module1.module#Module1Module' },
  { path: 'module2', loadChildren: 'app/module2/module2.module#Module2Module' }
];

谢谢.

Answer 1

让这个工作的两个问题.首先,路由器存在一个错误,它会考虑导入模块的顺序.有关错误的更多详细信息,请参阅此错误报告:https://github.com/angular/angular/issues/12648

因此,为了解决这个问题,您需要在module2.module.ts中更改导入的顺序,以便在导入module1之前导入module2路由文件.

@NgModule({
    imports: [
        routing, // this order is important
        Module1Module
    ],
    declarations: [
        Module2Component
    ]
})

其次,使用ModuleWithProviders将路由模块导出为const,而不是将其导出为类.又更改module2路由文件(module2.routing.ts)以导出类似的类(您需要导入NgModule):

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class routing {
}

这应该为你解决.这是一个工作的插件:https://plnkr.co/edit/5impstull9EBCUxlw26k