Question

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

/ buildings /

/ buildings /：buildingId

/ buildings /：buildingId / floors

/ buildings /：buildingId / floors /：floorId

我正在编写一个针对此的有角度的8应用程序，应该使用相同的路由。

首先，我尝试了嵌套路由：

export function FetchLearningActions(submissionId) {

    var url = 'api/LearningAction/FetchLearningActions';

    return dispatch => {

        dispatch(learningActionDataOperationBegin());

        axios.get(url, { params: { submissionId } })
            .then(response => {
                console.log('Learning actions are loaded.');

                const learningActions = new schema.Entity('learningActions');

                const normalizedData = normalize(response.data, [learningActions]);
                dispatch(fetchLearningActionsSuccess(normalizedData.entities.learningActions))
            })
            .catch(error => { learningActionDataOperationFailure(error) });
    }
}

但这似乎仅支持组件的层次结构。对我来说，这意味着我必须将每个父组件的输出保持在屏幕上，最低级别的显示应类似于：


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

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

是否存在这样一种机制，我可以使用该机制，而不必在每个级别上（即，对于您所在的级别和所有父级别）都进行所有剩余调用？

Answer 1

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

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

角嵌套路由与页面

1 个答案: