使用不同的参数值加载Angular页面时多次加载

Question

我不知道这是我的错误、功能还是错误，但我想做的是有一个合同页面和一个聊天页面（每个相应的合同都有一个聊天）。

现在取决于打开哪个聊天或哪个合同，我的网址会发生变化：

david/contracts -> david/contracts/12

david/chats -> david/chats/12

以合约 id 结尾作为参数。

我的路由模块如下所示：

{
  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 中使用不同的 id 作为参数时，页面会被多次加载，因为它认为要加载不同的页面。

也许你们中的一个人可以帮助我找到原因或如何改变行为，因为我只想让合同和聊天页面每次加载一次：

这是我在页面之间跳转后我的 dom 的图片： Dom structure

Answer 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)
             }
         ]
},