导入模块中的Angular 2路径会覆盖当前电流 [英] Angular 2 routes in imported module override current
问题描述
这是笨蛋: https://plnkr.co/edit/WIFNVIEVqls4gXk21Muj
有2个模块都定义了路由.模块2导入模块1以便使用其中的组件.您永远无法导航到模块2.而是加载模块1.
There're 2 modules both have routes defined. Module 2 imports module 1 in order to use a component from it. You can never navigate to Module 2. Module 1 loads instead.
模块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' }
];
谢谢.
推荐答案
要解决此问题,有两个问题.首先,路由器存在一个错误,该错误考虑了导入模块的顺序.有关该错误的更多详细信息,请参见以下错误报告: https://github.com/angular/angular/issues/12648
Two issues to get this working. First, there is a bug with the router that takes in account the order of your imported modules. For more details on the error, see this bug report: https://github.com/angular/angular/issues/12648
因此,要解决该错误,您需要在module2.module.ts中更改导入顺序,以便在导入module1之前先导入module2路由文件.
So to get around the bug, you need to change the order of your imports in module2.module.ts so that your module2 routing file is imported before you import module1.
@NgModule({
imports: [
routing, // this order is important
Module1Module
],
declarations: [
Module2Component
]
})
第二,不要使用ModuleWithProviders将路由模块导出为const,而是将其导出为类. aka更改module2路由文件(module2.routing.ts)来像这样导出一个类(您需要导入NgModule):
Second, instead of exporting your routing module as a const using ModuleWithProviders export it as a class. aka change the module2 routing file (module2.routing.ts) to export a class like so (you'll need to import NgModule):
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class routing {
}
这应该为您解决.这是个工作正常的人: https://plnkr.co/edit/5impstull9EBCUxlw26k
This should fix it for you. Here's a working plunker: https://plnkr.co/edit/5impstull9EBCUxlw26k
这篇关于导入模块中的Angular 2路径会覆盖当前电流的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!