angular - 從不同模塊載入路由到命名的 router-outlet

我有一些模組，用於貨物追蹤系統的不同部分。其中一些包括：scheduleModule、equipmentsModule、driverModule 等。這些模組各自有自己延遲加載的路由，而且每個模組的路徑相對於根目錄都是不同的。

  {
    path: 'equipamentos',
    loadChildren: () => import('./modules/equipments/equipments.module').then(m => m.EquipmentsModule)
  },
  {
    path: 'schedules',
    loadChildren: () => import('./modules/schedules/schedules.module').then(m => m.SchedulesModule)
  },
  {
    path: 'drivers',
    loadChildren: () => import('./modules/drivers/drivers.module').then(m => m.DriversModule)
  },

每個模組都有自己的子路由，用於實體詳細資料以及像編輯和列出這類操作。

我正在主 router-outlet 上打開主要列表頁面，而且每個項目詳情的導航也都在主 outlet 中打開。現在我正在將它改為在不同的命名 router-outlet 中打開，比如像抽屜式側邊欄中的詳情頁面。

對於直接與渲染在主要 router-outlet 中的模組相關的事物，但有些事物位於主要範圍之外，卻可以從主要實體的詳細頁面內部訪問。

現在有了這個子輸出口，我有了類似這樣的東西：

<div class='mainPage'>
   <router-outlet></router-outlet>
</div>

<sidebar-drawer>
   <router-outlet name="drawer"></router-outlet>
</sidebar-drawer>

舉例來說，我在路由 /schedule/list 上有一個時程列表，然後要從列表中查看其詳細資訊時，我有一個按鈕可以帶我到 /schedule/details/:id。

在那些路由上，我確實把詳細頁面的渲染移到了抽屜出口，大概像這樣：

   this.router.navigate(['schedules', {outlets: {drawer: ['details', schedule.id]}}], {relativeTo: this.route.root});

而且我還可以從詳情抽屜的出口中，導航到 /schedule/edit/:id，而不需要關閉它，也不會失去抽屜背後的列表頁面。

現在的問題是，我還需要在抽屜內將用戶導航到不同的模組頁面，如 /drive/details/:id。

 this.router.navigate([{outlets: {drawer: ['/', 'driver', 'details', selectedDriverId]}}], {relativeTo: this.route.root});

由於它與排程模組不共享相同的基礎路徑，我得到了找不到路由的錯誤。

我如何允許使用者導航到不同模組的路由，同時保持主路由呈現的頁面不變。就像在主路由和名為 router-outlet 的次要路由上進行獨立導航一樣。

附註：主的和命名的 router-outlets 都在主要的 app.component.html 中，位於子模組之外，在主要的 app.module.ts 內。

附註2：我正在使用 Angular v12。

PS3。我實際上創建了一個 GitHub 倉庫，裡面有一個示範它應該如何運作的範例，但它也沒有成功

https://github.com/BarretoDiego/router-test