Angular 路由器：水平显示子项（作为兄弟姐妹）

Question

我想实现以下行为：

路线：

/ ROOT
/患者 PANEL1 depth-1
/patients/1 PANEL2 depth-2
/patients/1/日志 PANEL3 depth-3

我想要以下路由定义：

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

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

Answer 1

是的，这是可能的，我制作了与您相同的应用程序

根组件（在授权或任何其他之后）
- 左侧菜单
- 航线出口
- - 患者组件
- - 航线出口
- - - PatientsListComponent（路由出口或模板中带有 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>

一样越来越深

Angular 路由器：水平显示子项（作为兄弟姐妹）

Angular router: Displaying children horizontal (as siblings)

angular

angular-router

angular-animations