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

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

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

• 根组件（经过身份验证或其他任何操作之后）
• • 左菜单
• • 路线出口
• • • PatientsComponent
• • • 路线出口
• • • • PatientsListComponent（路由出口或ngIf，模板中带有url参数）
• • • • 路线出口
• • • • • PatientDetailsComponent（路由出口或ngIf，模板中带有url参数）

越来越深

比起您编写路由器，您在深度上使用相同的组件

像您一样路由，但就我而言，PatientList不存在，我在PatientComponent中呈现

RootComponent： <app-menu></app-menu> <router-outlet></router-outlet>

PatientComponent： <app-list></app-list> <router-outlet></router-outlet>

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

越来越深