角度嵌套路由

Question

我的应用程序中有一些路由我想实现 URL 以通过它在某些课程中的 id 来访问某些 eaxam，就像这样：

localhost:4200/teacher/100/courses/50/exams/150

如何实现它？我的路线是这样的：

{path:'student/:id',component:StudentComponent},
  {path:'teacher/:id',component:TeacherComponent},
  {path:'course/:id',component:ParentComponent},
  {path:'exam/:id',component:ParentComponent}

这很好，但是当我到达每条路线时，它会从 url 中删除前一条：

localhost:4200/course/100

然后当我在该课程中参加考试时，URL 变为

localhost:4200/exam/50

编辑：喜欢我做的答案

:{
   path:'teacher/:id',
   component:TeacherComponent,
   children: [{
      path: 'courses/:id',
      component: SomeComponent,
      children: [{
         path: 'exams/:id',
         component: SomeOtherComponent
      }]
   }]
}

为了导航

this.router.navigate(['courses/'+this.myCourses[i].courseCode],{relativeTo:this.activatedRoute})

这确实会更改 URL，但不会更改视图，因此不会导航到课程组件​​！

Answer 1

使用child routes。示例：

{
   path:'teacher/:id',
   component:TeacherComponent,
   children: [{
      path: 'courses/:id',
      component: SomeComponent,
      children: [{
         path: 'exams/:id',
         component: SomeOtherComponent
      }]
   }]
}

然后，您可以使用 navigate() 方法导航到子路由，如您的示例所示，但请注意，navigate() 使用的路径与 relativeTo 参数中传递的路由相关。

因此，根据您的示例，this.router.navigate(['courses/'+this.myCourses[i].courseCode],{relativeTo:this.activatedRoute}) 仅在 this.activatedRoute 为 /teacher/:id 时才有效。

您还应该将<router-outlet> 添加到您的模板中，以呈现与每个子路由关联的视图。

作为一般建议，我强烈建议您慢慢来，通过 Angular tutorial