因此,我有一个包含多个模块的应用程序,这些模块具有正确放置的路由,每个模块都有自己的路由。一切正常,直到我尝试实现延迟加载。

先前状态:

示例模块

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/

10-12 12:39
查看更多