角度嵌套路由与页面

Question

我有一个典型的面向资源的建筑物 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 获取数据。

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

Answer 1

您要查找的是resolver。解析器在路由级别进行 API 调用。来自 REST API 的数据将通过您的路由器提供。

如果您希望减少应用程序的 API 调用量，请考虑使用 caching using interceptors，使用 graphQL 进行查询，或使用 NgRx 更好地管理您的状态。