按路線導航到的 Angular 6/7 輔助出口 - 清除主要出口，它不應該

Question

延遲加載和使用命名的出口。 我已經按預期加載了命名插座，但是當它加載時，它也會清除主要插座。 我希望主插座保留它正在顯示的組件，而只是將命名的插座更改為顯示新組件。

感謝@pixelbits 的一些幫助......這是一個不起作用的例子https://stackblitz.com/edit/angular-sw6cmc

我不想改變主要出口。

html

<router-outlet></router-outlet>
<router-outlet name="dialogOutlet"></router-outlet>

路線：

 {    
    path: 'packoutdialog'
    , children:[
      {path:'', outlet:'dialogOutlet', component: PackoutComponent}]

  },

其中任何一個都將填充 dialogOutlet 但清除主要

 this.router.navigate(['inventory', 'packoutedialog'])
this.router.navigate(['packoutdialog',{outlets:{'dialogOutlet':[]}}],{skipLocationChange: true, relativeTo: this.activatedRoute.parent});

這似乎應該有效，但沒有。

this.router.navigate([{outlets:{'dialogOutlet':['inventory','packoutdialog']}}])

預期的結果是主路由器插座將視圖保留在其中，只有命名插座發生變化。 目前，命名插座正在按預期變化，但主要插座正在清除。

Answer 1

當您將主插座和輔助插座放在一起時，您需要確保兩條路線完全解析為一個組件。 事實上，您應該孤立地考慮每個路由路徑。

例如，如果您有一個設置路由器插座和命名路由器插座的組件：

<router-outlet></router-outlet>
<router-outlet name="dialogOutlet"></router-outlet>

然后你需要確保每個路由都可以解析為一個組件：

{ path: 'inventory', component: InventoryComponent, children: [...] }, 
{ path: 'packoutdialog', component: PackoutComponent, outlet: 'dialogOutlet' }

請注意，需要在根級別定義命名插座dialogOutlet的packoutdialog路由。 如果您將命名出口定義為子路由，它將永遠無法解析。

要導航到這些路線：

this.router.navigate([{ outlets: { primary: 'inventory', dialogOutlet: 'packoutdialog'} }]);

主路由將解析為 InventoryComponent，命名的 outlet 將解析為 PackoutComponent。

要清除對話框，您可以為兩者明確指定一個路徑：

this.router.navigate([{ outlets: { primary: 'inventory', dialogOutlet: null}]);

或者，如果您希望能夠在dialogOutlet考慮主要路由的情況下顯示dialogOutlet ，則可以在不明確定義主要路由的情況下進行導航：

this.router.navigate([{ outlets: { dialogOutlet: 'packoutdialog'}]);

然后清除對話框：

this.router.navigate([{ outlets: { dialogOutlet: null }]);

演示

以上也適用於延遲加載的模塊。

使用延遲模塊 1 進行演示 使用延遲模塊 2 進行演示