angular - 角度嵌套路由与页面

问题描述

我有一个典型的面向资源的建筑物 REST API：

/建筑物/

/buildings/:buildingId

/buildings/:buildingId/楼层

/buildings/:buildingId/floors/:floorId

我正在编写一个面向此的 Angular 8 应用程序，它应该使用相同的路由。

首先我尝试了嵌套路由：


  {
    path: 'buildings',
    component: BuildingsComponent,
    children: [
      {
        path: ':id',
        component: BuildingComponent,
        children: [
          {
            path: 'floors',
            component: FloorsComponent,
            children: [
              {
                path: ':id',
                component: FloorComponent
              }
            ]
          }
        ]
      }
    ]
  }

但这似乎只支持组件的层次结构。这对我来说意味着我必须将每个父组件的输出保留在屏幕上，在最低级别看起来像：

[building list table]
[selected building data]
[floor list table]
[selected floor data]

但我想要独立的页面：

[building list table]

选择建筑->

[selected building data]
[floor list table]

选择楼层->

[selected floor data]

为此，我使用了一个扁平的路由器配置：

  {
    path: 'buildings',
    component: BuildingsComponent,
  },
  {
    path: 'buildings/:buildingId',
    component: BuildingComponent,
  },
  {
    path: 'buildings/:buildingId/floors/:floorId',
    component: FloorComponent,
  }

但我在这里缺少的是层次结构中的每个组件都从 REST API 获取数据。

是否有一种机制可以用于这种情况，而不必在每个级别（即您所在级别和所有父级别）都进行所有休息呼叫？

标签： angularangular-ui-router

angular - 角度嵌套路由与页面

问题描述

解决方案

推荐阅读