Question

最初我想添加面包屑。平坦的路线层次结构似乎不适合这项任务。该应用程序包含一个选项卡结构，所有其他内容将加载到一个路由器插座中。

使用孩子，我能够挖掘一个级别：

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：同一路由器插座中的嵌套子路由（任意级别）

1 个答案: