Angular 10 輔助路由器插座放在延遲加載模塊時不工作

Question

在延遲加載模塊中創建第二個路由器插座時，我遇到了問題。

我從這個示例開始，其中輔助路由https://stackblitz.com/edit/angular-nested-auxiliary-routes-irixxy工作正常。

我的應用程序有點復雜，我使用延遲加載的模塊。 在新模塊中，我想使用第二個路由器插座來動態顯示組件。 但是我發現當輔助路由被添加到另一個模塊而不是 app 模塊時，它們會出現問題。

為了檢查問題是否出在我的應用程序的路由中，我創建了一個示例https://stackblitz.com/edit/angular-nested-auxiliary-routes-bpuswu ，它與基本示例類似，但添加了延遲加載模塊，其中路由（主要和次要）已配置。 問題是與輔助出口路徑的鏈接不起作用，給出錯誤Cannot match any routes. URL Segment: 'level-0' Cannot match any routes. URL Segment: 'level-0' 。 創建的無效鏈接類似於[...]/level-0/(level-1//outlet1:aux-1) 。 我的應用程序項目中也存在同樣的問題。

任何人都有類似的問題並且知道如何解決它？ 我的日常有什么問題嗎？ 還是路由器的BUG？

Answer 1

我認為您的鏈接不正確：

試試這個：<a [routerLink]="['/level-0/level-1', { outlets: { outlet1: 'aux-1' } }]">L1-A1 |

模板中還應該有一個主要的和輔助的：

   <router-outlet></router-outlet>
<router-outlet name="outlet1"></router-outlet>`

Answer 2

問題

我設法將問題隔離到線路上

 outlet2: 'aux-3'

如果我們檢查為<a [routerLink]="['/level-0', { outlets: { primary: ['level-1', { outlets: { primary: ['level-2', { outlets: { primary: ['level-3'], outlet2: 'aux-3' } }] } }], outlet1: 'aux-1' } }]">L1-A1/L2/L3-A3</a>我們看到它產生

/level-0/(level-1/(level-2/(level-3//outlet2:a/u/x/-/3))//outlet1:aux-1)

似乎aux-3轉換為a/u/x/-/3 。 這絕對不是預期的。 看起來字母已被拆分並與/連接。

解決方案/解決方法

如前所述，路由器出口中似乎需要一個數組，因此一個簡單的解決方案是傳遞一個數組

 outlet2: ['aux-3']

<a [routerLink]="['/level-0', { outlets: { primary: ['level-1', { outlets: { primary: ['level-2', { outlets: { primary: ['level-3'], outlet2: ['aux-3'] } }] } }], outlet1: ['aux-1'] } }]">L1-A1/L2/L3-A3</a>

現在生成了正確的鏈接並且路由正常工作

我的路由有什么問題嗎？

您的路線運行正常。 但是您可能已經注意到，鏈接的生成方式存在一些不一致之處。 我在This Stackblitz中嘗試了一個簡單的路由器鏈接，它產生了相同的鏈接。

<a [routerLink]="['/', { outlets: { outlet1: ['ab'] } }]">Link 1|</a> <br />
<a [routerLink]="['/', { outlets: { outlet1: 'ab' } }]">Link 2</a>

下面是執行上述的結果

工作 stackblitz 演示

延遲加載模塊上的輔助路由

此問題中突出顯示了您面臨的問題的簡單解釋命名路由器出口和延遲加載模塊，並在此答案https://stackoverflow.com/a/49367379/13680115中提供了鏈接，即輔助路由不受支持盒子

懶加載輔助 #10981

在上面的帖子中，在此評論中，用戶在下面突出顯示

似乎懶加載和輔助路由並沒有廣泛使用。 我們可以看到很多演示，分開但僅此而已。 就像沒有人在中/大型應用程序中使用它一樣

在同一篇文章中， 這里似乎有一個解決方法

我們創建一個帶有無組件父路由的嵌套路由。 我已經在下面的演示中實現了它，它適用於第一級延遲加載模塊。 對於下一個級別，路由正確匹配且沒有錯誤，但不幸的是組件未加載，我相信解決方案是將一個級別簡單地移動到父組件。 這樣，一層輔助路由在父模塊中加載，而另一層在延遲加載模塊中

演示 Stackblitz

Answer 3

擁有不同的路由器真的很重要嗎？ 我能問一下這是什么原因嗎？ 我設法讓它與一台路由器一起工作。 你能檢查一下嗎？

這是更新的示例： https://stackblitz.com/edit/angular-nested-auxiliary-routes-w1tcn4?file=src/app/app.component.html