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

Question

我想实现以下行为：

路线：

• / ROOT
• /患者 PANEL1 depth-1
• /患者/1 PANEL2 depth-2
• /患者/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>

PatientDetailsComponent： <app-data>DETAIL DATA HERE</app-data> <router-outlet></router-outlet>

越来越深