因此,我有一个包含多个模块的应用程序,这些模块具有正确放置的路由,每个模块都有自己的路由。一切正常,直到我尝试实现延迟加载。
先前状态:
示例模块
export const EXAMPLE_ROUTES: Routes = [
{ path: 'new', component: AddOpportunityComponent },
{ path: ':id', component: OpportunityProfileComponent,
children: [
{
path: 'edit/sdg-info', component: SdgInfoComponent
}
]}
];
我在示例模块中导入这个EXAMPLE_ROUTES
现在我有根级路由
const APP_ROUTES: Routes = [
{ path: '', component: HomeComponent},
{ path: 'search', component: SearchComponent },
{ path: 'example', component: ExampleComponent, children: [...EXAMPLE_ROUTES], canActivate: [AuthGuard, OnboardedGuard] },
];
export const appRouting = RouterModule.forRoot(APP_ROUTES, {enableTracing: true});
通过此设置,它可以正常工作
尝试延迟加载后
示例模块
const EXAMPLE_ROUTES: Routes = [
{ path: 'new', component: AddOpportunityComponent },
{ path: ':id', component: OpportunityProfileComponent,
children: [
{
path: 'edit/sdg-info', component: SdgInfoComponent
}
]}
];
export const exampleRouting = RouterModule.forChild(EXAMPLE_ROUTES);
然后应用程序路由变为
const APP_ROUTES: Routes = [
{ path: '', component: HomeComponent},
{ path: 'search', component: SearchComponent },
{ path: 'example', loadChildren: './example/example.module#ExampleModule', canActivate: [AuthGuard, OnboardedGuard] }
];
export const appRouting = RouterModule.forRoot(APP_ROUTES, {enableTracing: true});
我面临的问题是,示例路由可以正常工作,现在/ search路由中断了,因为路由器出于某种原因尝试将其与机会路由匹配(路径:':id')
这里可能出什么问题了?
最佳答案
当您第一次在FeatureModule
中实现RootModule
时,并且在给定时间之后,您决定要通过FeatureModule
延迟加载此loadChildren
时,可能会出现此问题,而您又忘记了从导入中删除FeatureModule
RootModule
。
在您的情况下,编译后(PSEUDO-CODE),您的路由配置将如下所示:
const Routes_CONFIG = [
{ path: '', component: HomeComponent},
{ path: 'search', component: SearchComponent },
{ path: 'example', loadChildren: './example/example.module#ExampleModule', canActivate: [AuthGuard, OnboardedGuard] }
{ path: 'new', component: AddOpportunityComponent },
{ path: ':id', component: OpportunityProfileComponent,
children: [
{ path: 'edit/sdg-info', component: SdgInfoComponent }
]
}
]
就您而言,当您仅输入/ search时,您将匹配
:id
OpportunityProfileComponent
。这是因为路由器接受与导航请求路径匹配的第一条路线。关于javascript - Angular 路由无法正确映射以进行延迟加载,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48840527/