Angular 9-多级嵌套路由问题

编程问答 2022-08-12

问题描述

我需要实现这样的URL方案：http://localhost:4200/en/home/students/:studentId/macro/:macroId/lto/:ltoId/sto/:stoId/reports/:reportsId。

我能够访问此网址http://localhost:4200/en/home/students/18/macro/1/lto/2/sto。

然后，当我单击链接时，我应该导航至http://localhost:4200/en/home/students/18/macro/1/lto/2/sto/:stoId/reports。

实际上，浏览器上的url会相应更改，但是Angular会为上一条路线http://localhost:4200/en/home/students/:studentId/macro/:macroId/lto渲染组件。

这是我的 students-routing.module.ts ，在其中设置了我的嵌套路线：

const routes: Routes = [
  { 
    path: '',component: StudentsComponent 
  },{ 
      path: ':studentId/macro',component: StudentDetailComponent,runGuardsAndResolvers: 'always',resolve: { 
        item: StudentDetailResolverService,macroAssignments: MacroAssignmentsResolverService
      },children: [
        {
          path: ':macroId/lto/:ltoId/sto/:stoId/reports',loadChildren: () => import('../sto/sto.module').then(m => m.STOModule),resolve: {
            item: StoDetailResolverService,items: ReportsResolverService
          },children: [
            {
              path: ':reportId',pathMatch: 'full',loadChildren: () => import('../reports/reports.module').then(m => m.ReportsModule),component: ReportDetailComponent,resolve: {
                item: ReportDetailResolverService,}
            },]
        },{
          path: ':macroId/lto',loadChildren: () => import('../lto/lto.module').then(m => m.LTOModule),resolve: { 
            items: LtoResolverService,macroAssignment: MacroAssignmentDetailResolverService
          },},]
  }
];

您可以看到我实际上懒于加载3个不同的模块： LTOModule ， STOModule 和 ReportModule 。我省略了 LTOModule ，因为它有效，问题一定出在其他两个后续模块中。

STOModule -> sto-routing.module.ts 

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

ReportsModule -> reports-routing.module.ts 

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

RouterModule.forChild(routes)被导入到与根目录不同的每个路由模块中。

该层次结构的一级子级使用的router-outlet（ LTOModule 和 STOModule 所使用的StudentDetailComponent {1}}），而 second-level 子级（ ReportModule ）应该将其内容呈现在放置在 STOModule （实际上，该路由被定义为 STOModule 路由的子代）。

编辑

我已经从 students-routing.module.ts 中删除了 ReportsModule 的延迟加载，并将其放置在 sto-routing.module.ts 中像这样

router-outlet

现在，我可以获取直到 //NEW sto-routing.module.ts const routes: Routes = [ { path: '',children: [ { path: ':reportId',resolve: { item: ReportDetailResolverService,} },] },]; 为止的网址。

然后，当我单击链接时，出现以下错误： http://localhost:4200/en/home/students/:studentId/macro/:macroId/lto/:ltoId/sto/:stoId/reports

编辑＃2

尝试调试，我已经订阅了每个Error: Cannot match any routes. URL Segment: 'home/students/18/macro/1/lto/2/sto/29/reports/8'来检查引擎盖下发生了什么。看来当我在RouterEvent

然后单击最后一个链接以导航到http://localhost:4200/en/home/students/:studentId/macro/:macroId/lto/:ltoId/sto/:stoId/reports，

发生http://localhost:4200/en/home/students/:studentId/macro/:macroId/lto/:ltoId/sto/:stoId/reports/:reportsId类型的事件以及RouteConfigLoadStart类型的事件。可能值得注意的是，此事件具有RouteConfigLoadEnd属性，在这种情况下，其值为route。对我而言，这绝对没有意义，因为该路径在层次结构中相当遥远。因此，似乎是我的问题，因为我的路由器试图加载层次结构中更高的路由，而不是叶路由。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangular-routerlinkangular-routingangular9url-routing