时间戳

首页 > 解决方案 > 角度路由器：水平显示子级（作为兄弟姐妹）

angular - 角度路由器：水平显示子级（作为兄弟姐妹）

问题描述

我想实现以下行为：

路线：

我想有以下路由定义：

 const routes: Routes = [
  {
    path: 'patients',
    component: PatientsComponent,
    children: [
      {
        path: '',
        component: PatientsListComponent,
        children: [
          {
            path: ':id',
            component: PatientDetailsComponent,
            children: [
              {
                path: 'log',
                component: PatientLogComponent,
              }
            ]
          }
        ]
      }
    ]
  },
];

如果我这样做 DOM 结构是嵌套的......是否可以水平打开子项（类似兄弟姐妹）？此外，我还想启用动画，这样如果深度超过 3 个，第一个面板的宽度就会崩溃......

标签： angularangular-routerangular-animations

解决方案

是的，这是可能的，我制作了和你一样的应用程序

  • 根组件（在 auth 或其他任何东西之后）
    • 左侧菜单
    • 路线出口
      • 患者组件
      • 路线出口
        • PatientListComponent（路由出口或模板中带有 url 参数的 ngIf）
        • 路线出口
          • PatientDetailsComponent（路由出口或模板中带有 url 参数的 ngIf）

越来越深

比你写路由器你更深入地使用相同的组件

像您一样路由，但在我的情况下 PatientList 不存在，我在 PatientComponent 中呈现

根组件： <app-menu></app-menu> <router-outlet></router-outlet>

患者组件： <app-list></app-list> <router-outlet></router-outlet>

患者详细信息组件： <app-data>DETAIL DATA HERE</app-data> <router-outlet></router-outlet>

一样的越来越深

推荐阅读