Angular 10 辅助路由器插座放置在延迟加载模块中时不起作用

如何解决Angular 10 辅助路由器插座放置在延迟加载模块中时不起作用

在延迟加载模块中创建第二个路由器插座时，我遇到了问题。

我从这个例子开始，其中辅助路由 https://stackblitz.com/edit/angular-nested-auxiliary-routes-irixxy 正常工作。

我的应用程序有点复杂，我使用延迟加载模块。在新模块中，我想使用第二个路由器插座来动态显示组件。但是我发现当辅助路由被添加到应用模块之外的另一个模块时会出现问题。

为了检查问题是否出在我的应用程序的路由中，我创建了一个示例 https://stackblitz.com/edit/angular-nested-auxiliary-routes-bpuswu，它类似于基本示例，但添加了延迟加载模块，其中配置了路由（主要和次要）。问题是与辅助出口路径的链接不起作用，给出了错误 Cannot match any routes. URL Segment: 'level-0'。创建的无效链接类似于 [...]/level-0/(level-1//outlet1:aux-1)。同样的问题出现在我的应用项目中。

有人遇到过类似的问题并知道如何解决吗？我的日常有什么问题吗？还是路由器有问题？

解决方法

我认为您的链接不正确：

试试这个： L1-A1 |

并且模板中也应该有一个主要的和辅助的：

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

,

问题

我设法将问题隔离到线路

 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',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>

下面是实现上面的结果

Working stackblitz demo

延迟加载模块上的辅助路由

此问题Named router outlet and lazy loaded modules 中突出显示了对您所面临问题的简单解释，此答案中提供了一个链接https://stackoverflow.com/a/49367379/13680115 即不支持开箱即用的辅助路由

Lazy load auxilary #10981

在上面的帖子中，在此 comment 中，用户突出显示了下方

似乎懒加载和辅助路由并没有广泛地一起使用。 我们可以看到很多演示，分开了，仅此而已。就像没有人在中/大型应用程序中使用它 ?

在同一个 post 中似乎有一个解决方法 here

我们创建了一个带有无组件父路由的嵌套路由。我已经在下面的演示中实现了它，它适用于第一级延迟加载模块。对于下一个级别，路由正确匹配，没有错误，但不幸的是未加载组件，我相信解决方案是简单地将一个级别移动到父组件。这样，一级辅助路由加载在父模块中，而另一级在延迟加载模块中

Demo Stackblitz

,

拥有不同的路由器真的很重要吗？我能问一下这是什么原因吗？我设法用一台路由器让它工作。可以查一下吗？

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