5

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

我从这个示例开始，其中辅助路由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'。创建的无效链接就像[...]/level-0/(level-1//outlet1:aux-1). 同样的问题出现在我的应用项目中。

任何人都有类似的问题并且知道如何解决它？我的日常有什么问题吗？还是路由器的BUG？

4

3 回答 3

0

我认为您的链接不正确：

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

模板中还应该有一个主要的和辅助的：

   <router-outlet></router-outlet>
<router-outlet name="outlet1"></router-outlet>`
于 2021-05-13T12:33:15.903 回答
0

问题

我设法将问题隔离到线路上

 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

于 2021-05-14T00:41:36.173 回答
0

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

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

于 2021-05-18T17:58:45.877 回答