angular - 导航到子路线给了我：“错误：无法匹配任何路线”（Angular 6）

Question

第一个例子有效（但写得不好）。

const FooProcessingRoutes: Routes = [{
  path: '',
  pathMatch: 'full',
  redirectTo: '/foo-processing/list',
}, {
  path: 'list',
  component: FooListComponent,
}, {
  path: 'another-list',
  component: FooAnotherListComponent,
}, {
  path: 'another-list/:id/details',
  component: FooAnotherListComponent,
  children: [{
    path: '',
    component: FooAnotherListDetailsComponent,
    outlet: 'details-view',
  }]
}];

export { FooProcessingRoutes };

第二个例子应该有效（在我看来），我希望这样：

const FooProcessingRoutes: Routes = [{
  path: '',
  pathMatch: 'full',
  redirectTo: '/foo-processing/list',
}, {
  path: 'list',
  component: FooListComponent,
}, {
  path: 'another-list',
  component: FooAnotherListComponent,
  children: [{
    path: ':id/details',
    outlet: 'details-view',
    component: FooAnotherListDetailsComponent,
  }],
}];

export { FooProcessingRoutes };

我需要:id/details成为 的孩子another-list。这两个示例都链接到我浏览器中的相同路径（即http://localhost:4200/#/foo-processing/another-list/1/details）。

然而，第二个例子Error: Cannot match any routes. URL Segment: 'foo-processing/another-list/1/details'在 Chrome/Firefox 中给了我。

我在那里遗漏了什么还是一个错误？

标签： angularangular-routing

Answer 1

它应该是：

{
  path: 'another-list',
  component: FooAnotherListComponent,
  children: [{
    path: ':id/details',
    component: FooAnotherListDetailsComponent,
    outlet: 'details-view',
  }