Question

我需要实现这样的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),
          runGuardsAndResolvers: 'always',
          resolve: {
            item: StoDetailResolverService,
            items: ReportsResolverService
          },
          children: [
            {
              path: ':reportId',
              pathMatch: 'full',
              loadChildren: () => import('../reports/reports.module').then(m => m.ReportsModule),
              component: ReportDetailComponent,
              runGuardsAndResolvers: 'always',
              resolve: {
                item: ReportDetailResolverService,
              }
            },
          ]
        },
        {
          path: ':macroId/lto',
          loadChildren: () => import('../lto/lto.module').then(m => m.LTOModule),
          runGuardsAndResolvers: 'always',
          resolve: { 
            items: LtoResolverService,
            macroAssignment: MacroAssignmentDetailResolverService
          },
        },
      ]
  }
];

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

STOModule -> sto-routing.module.ts

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

ReportsModule -> reports-routing.module.ts

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: ReportDetailComponent,
  }
];

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

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

编辑

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

router-outlet

现在，我可以获取直到//NEW sto-routing.module.ts const routes: Routes = [ { path: '', pathMatch: 'full', component: StoDetailComponent, children: [ { path: ':reportId', loadChildren: () => import('../reports/reports.module').then(m => m.ReportsModule), runGuardsAndResolvers: 'always', 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。对我而言，这绝对没有意义，因为该路径在层次结构中相当遥远。因此，似乎是我的问题，因为我的路由器试图加载层次结构中更高的路由，而不是叶路由。

Angular 9-多级嵌套路由问题

0 个答案: