Угловые вложенные маршруты против страниц - PullRequest
Новая
       65

Угловые вложенные маршруты против страниц

1 голос
/ 04 ноября 2019

У меня типичный ресурсно-ориентированный REST API для зданий:

/ здания /

/ здания /: buildingId

/ здания /: buildingId / этажей

/ building /: buildingId / floors /: floorId

И я пишу ориентированное на это угловое приложение 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.

Существует ли механизм для такого сценария, который я мог бы использовать вместо необходимости выполнять все остальные вызовы на каждом уровне (т. Е. Для уровня, на котором вы находитесь, и для всех родительских уровней)?

1 Ответ

1 голос
/ 04 ноября 2019

То, что вы ищете, это resolver . Средство распознавания выполняет вызовы API на уровне маршрута. Данные из REST API будут доступны через ваш маршрутизатор.

Если вы хотите уменьшить количество вызовов API, которые делает ваше приложение, рассмотрите возможность кэширования с использованием перехватчиков , используя graphQL для запросов или NgRx для лучшего управления вашим состоянием.

...