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

Question

这是 plunker： https://plnkr.co/edit/WIFNVIEVqls4gXk21Muj

有 2 个模块都定义了路由。模块 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 {
}

这应该为您修复它。这是一个工作 plunker：https://plnkr.co/edit/5impstull9EBCUxlw26k