Угловые страницы загружаются несколько раз при загрузке с разными значениями параметров

#angular #parameters #routes

Вопрос:

Я не знаю, является ли это ошибкой, функцией или ошибкой с моей стороны, но я пытаюсь создать страницу для контрактов и страницу для чатов (в которой есть один чат на соответствующий контракт).

Теперь в зависимости от того, какой чат или какой контракт открыт, мой URL-адрес меняется:

david/contracts -> david/contracts/12

david/chats -> david/chats/12

с идентификатором контракта в конце в качестве параметра.

Мой модуль маршрутизации выглядит следующим образом:

 {
  canActivate: [GlobalsProviderInit, SessionDataLoadedGuard, AuthGuard],
    path: ':username/chat',
      children: [
        {
          path: '',
          loadChildren: () => import('./pages/chat/chat.module').then(m => m.ChatPageModule)
        },
        {
          path: ':id',
          loadChildren: () => import('./pages/chat/chat.module').then(m => m.ChatPageModule)
        }
      ]
},
{
  path: ':username/contracts',
    canActivate: [GlobalsProviderInit, SessionDataLoadedGuard, AuthGuard],
      children: [
        {
          path: '',
          loadChildren: () => import('./pages/contracts/contracts.module').then(m => m.ContractsPageModule)
        },
        {
          path: ':id',
          loadChildren: () => import('./pages/contracts/contracts.module').then(m => m.ContractsPageModule)
        }
      ]
}
 

Проблема связана с функцией, которую я реализовал, чтобы открывать чат из открытого контракта и наоборот.
Теперь, когда я перескакиваю между страницами и изменяю контракт, в URL-адресе используются разные идентификаторы в качестве параметра, страница загружается несколько раз, потому что она думает, что загружается другая страница.

Может быть, кто-нибудь из вас мог бы помочь мне найти причину этого или как изменить поведение, потому что я хочу, чтобы страницы контрактов и чатов загружались только один раз каждый:

Это фотография моего дома после того, как я перескочил между страницами: Структура дома

Ответ №1:

Я думаю, вам следует изменить порядок дочерних маршрутов. Например:

 {
    canActivate: [GlobalsProviderInit, SessionDataLoadedGuard, AuthGuard],
    path: ':username/chat',
    children: [
             {
                 path: ':id',
                 loadChildren: () => import('./pages/chat/chat.module').then(m => m.ChatPageModule)
             },
             {
                 path: '',
                 loadChildren: () => import('./pages/chat/chat.module').then(m => m.ChatPageModule)
             }
         ]
},
 

Комментарии:

1. Я уже пробовал это, но также, когда я просто меняю страницу с david/chats/12 -> david/chats/14, она также генерирует новый компонент страницы, потому что он каким-то образом ищет URL-адрес всей страницы в розетке маршрутизатора, и в конце был только один с /12, поэтому он генерирует новый. На данный момент я переключился на параметры запроса, таким образом, у меня всегда один и тот же URL-адрес, а идентификатор задан как идентификатор в параметрах. (Xxx/?id=12)