Angular 5: 嵌套 child 路线在同一 router-outlet （任意级别）

Question

最初我想添加面包屑。平面 route-hierarchy 似乎不太适合这项任务。该应用程序由一个选项卡结构组成，所有其他内容将加载到一个 router-outlet 中。

使用 child，我能够向下挖掘一层：

const appRoutes: Routes = [
  {
    path: '',
    data: {
      title: 'StartPage',
      role: [UserRole.Customer, UserRole.Employee]
    },
    children: [
      {
      path: '',
      component: StartComponent // StartPage-Component
    },
      {
        path: 'overview/cars',
        component: OverviewCarsComponent,
        canActivate: [AuthenticationGuard],
        data: {
          title: 'CarsOverview',
          role: [UserRole.Customer, UserRole.Employee]
        }
      }
    ]
  } ...

但在那之后，什么都不想工作了。例如，我试过：

const appRoutes: Routes = [
  {
    path: '',
    data: {
      title: 'StartPage',
      role: [UserRole.Customer, UserRole.Employee]
    },
    children: [
      {
      path: '',
      component: StartComponent // StartPage-Component
    },
      {
        path: 'overview/cars',
        canActivate: [AuthenticationGuard],
        data: {
          title: 'CarsOverview',
          role: [UserRole.Customer, UserRole.Employee]
        }, 
        children: [
                 {
                  path: 'overview/cars',
                  component: OverviewCarsComponent
                 },
                 {
                  path: 'overview/cars/add',
                  component: AddCarsComponent
                  canActivate: [AuthenticationGuard],
                  data: {
                    title: 'AddCars',
                    role: [UserRole.Employee]
                  }
           }
        ]
      }
    ]
  } ...

我没有找到处理这种情况的最佳做法。

Answer 1

您可以尝试更改的是在子路由下。该路径已经在父级定义，基本路径是 - overview/cars - 所以你可以从子路由中截断它并像这样：

const appRoutes: Routes = [
  {
    path: '',
    data: {
      title: 'StartPage',
      role: [UserRole.Customer, UserRole.Employee]
    },
    children: [
      {
      path: '',
      component: StartComponent // StartPage-Component
    },
      {
        path: 'overview/cars',
        canActivate: [AuthenticationGuard],
        data: {
          title: 'CarsOverview',
          role: [UserRole.Customer, UserRole.Employee]
        }, 
        children: [
                 {
                  path: '',
                  component: OverviewCarsComponent
                 },
                 {
                  path: 'add',
                  component: AddCarsComponent
                  canActivate: [AuthenticationGuard],
                  data: {
                    title: 'AddCars',
                    role: [UserRole.Employee]
                  }
           }
        ]
      }
    ]
  } ...

Angular 5: 嵌套 child 路线在同一 router-outlet （任意级别）

Angular 5: Nested child routes in same router-outlet (arbitrary level)

angular-routing

angular

angular5