Angular 嵌套路由与页面

Question

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

/建筑物/

/buildings/:buildingId

/建筑物/:buildingId/floors

/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]

select 建筑 ->

[selected building data]
[floor list table]

select楼 ->

[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, using graphQL for queries, or NgRx 以更好地管理您的状态。

Angular 嵌套路由与页面

Angular nested routes vs pages

angular-ui-router

angular