Angular Router - 带 id 的嵌套子级

Question

我的角度路由器的一部分看起来像这样：

{
  path: 'things',
  component: ThingsComponent,
  children: [
    {
      path: ':id',
      component: ThingDetailComponent
    }
  ]
}

当点击

localhost:4200/things/3

时，为什么它落在

ThingsComponent

而不是

ThingDetailComponent

？

Answer 1

除了指定详细路由作为子项，你还可以像这样进行路由：

{
    path: 'things',
    component: ThingComponent,
  },
  {
    path: 'things/:id',
    component: ThingDetailComponent
  }
}

Answer 2

您只需将

path: ':id'

替换为

path: 'things/:id'

即可完成。

Answer 3

像这样：

{
  path: 'things', 
  children: [
  {
    path: '',
    component: ThingsComponent,
  },

  {
    path: ':id',
    component: ThingDetailComponent
  }
 ]
}