Angular одна и та же страница с разными маршрутами и содержимым

Question

Представьте, что в моем приложении angular есть два типа маршрутов:

/football и /basketball, и у меня есть отдельные компоненты для этих маршрутов.

Теперь у меня есть страница сведений . Страница сведений довольно сложна, и как футбол, так и баскетбол имеют одинаковый макет страницы сведений, поэтому у меня есть один компонент для него и такой маршрут: /details, а не /football/details или /basketball/details. это мини-игры, и на странице с подробностями я могу одновременно открывать и футбол, и баскетбол, поэтому я считаю, что реализация маршрутов /football/details или /basketball/details логически неверна.

Схема такая же, но мне нужно несколько вещей, которые нужно сделать по-разному внутри страницы деталей, в зависимости от того, что я открываю страницу деталей со страницы футбола или страницы баскетбола, поэтому я должен знать, что нахожусь на странице деталей футбола или странице деталей баскетбола. Итак, какова будет лучшая архитектура маршрута для такого рода задач? Я имею в виду, следует ли мне использовать queryParams? а может я что то не так делаю? что будет лучшим методом?

Answer 1

В приведенном выше сценарии, чтобы определить, с какого маршрута вы попали на страницу компонента, вы можете либо использовать параметры запроса, либо передать с объектом данных в модуле маршрутизации. Ниже приведены варианты использования обоих.

1) this.router.navigate(['/path'], { queryParams: { type: 'football'} });
2) {
    path: '',
    component: detailsComponent,
    data: {
      type: 'football'
    }
  }

Answer 2

Если это одна и та же страница с разными функциями, я бы предложил использовать маршрут /details с queryParams, а затем создать службу для обработки пользовательских logi c.