[英]Angular 10 auxiliary router outlet not working when placed in lazy loaded module
I have a problem with second router outlet when it's created in lazy-loaded module .在延迟加载模块中创建第二个路由器插座时,我遇到了问题。
I started with this example where auxiliary routes https://stackblitz.com/edit/angular-nested-auxiliary-routes-irixxy work correctly.我从这个示例开始,其中辅助路由https://stackblitz.com/edit/angular-nested-auxiliary-routes-irixxy工作正常。
My app is a bit more complicated and I use lazy loaded modules.我的应用程序有点复杂,我使用延迟加载的模块。 In the new module, I wanted to use a second router outlet to dynamically show components.
在新模块中,我想使用第二个路由器插座来动态显示组件。 But I found out there is a problem with auxiliary routes when they are added in another module than the app module.
但是我发现当辅助路由被添加到另一个模块而不是 app 模块时,它们会出现问题。
To check if the problem is in my app's routing I've created an example https://stackblitz.com/edit/angular-nested-auxiliary-routes-bpuswu which is similar to the base example but with added lazy-loaded module where routing (primary and secondary) is configured.为了检查问题是否出在我的应用程序的路由中,我创建了一个示例https://stackblitz.com/edit/angular-nested-auxiliary-routes-bpuswu ,它与基本示例类似,但添加了延迟加载模块,其中路由(主要和次要)已配置。 Problem is that links with the secondary outlet path are not working giving the error
Cannot match any routes. URL Segment: 'level-0'
问题是与辅助出口路径的链接不起作用,给出错误
Cannot match any routes. URL Segment: 'level-0'
Cannot match any routes. URL Segment: 'level-0'
. Cannot match any routes. URL Segment: 'level-0'
。 Created invalid links are like [...]/level-0/(level-1//outlet1:aux-1)
.创建的无效链接类似于
[...]/level-0/(level-1//outlet1:aux-1)
。 The same problem was in my app project.我的应用程序项目中也存在同样的问题。
Anyone has a similar problem and know how to fix it?任何人都有类似的问题并且知道如何解决它? Is there something wrong with my routine?
我的日常有什么问题吗? Or is it a bug in the router?
还是路由器的BUG?
I think your links are not correct:我认为您的链接不正确:
Try this: <a [routerLink]="['/level-0/level-1', { outlets: { outlet1: 'aux-1' } }]">L1-A1 |试试这个:<a [routerLink]="['/level-0/level-1', { outlets: { outlet1: 'aux-1' } }]">L1-A1 |
And also there should be an primary and auxilary in templates:模板中还应该有一个主要的和辅助的:
<router-outlet></router-outlet>
<router-outlet name="outlet1"></router-outlet>`
I managed to isolate the problem to the line我设法将问题隔离到线路上
outlet2: 'aux-3'
If we check the link created for <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>
we see that it produces如果我们检查为
<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)
It seems that aux-3
is converted to a/u/x/-/3
.似乎
aux-3
转换为a/u/x/-/3
。 which is definitely not expected.这绝对不是预期的。 It looks like the letters have been split and joint with
/
.看起来字母已被拆分并与
/
连接。
As stated earlier it seems an array was expected in the router outlet, so a simple solution is to pass an array instead如前所述,路由器出口中似乎需要一个数组,因此一个简单的解决方案是传递一个数组
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>
Now the correct link is produced and the routes work correctly现在生成了正确的链接并且路由正常工作
Is there somethink wrong with my routing?
我的路由有什么问题吗?
Your routes are working correctly.您的路线运行正常。 But as you may have noticed there is some inconsistency in the way the links are produced.
但是您可能已经注意到,链接的生成方式存在一些不一致之处。 I tried a simple router-link in This Stackblitz and it produces the same link.
我在This Stackblitz中尝试了一个简单的路由器链接,它产生了相同的链接。
<a [routerLink]="['/', { outlets: { outlet1: ['ab'] } }]">Link 1|</a> <br />
<a [routerLink]="['/', { outlets: { outlet1: 'ab' } }]">Link 2</a>
Below is the result of implementing the above下面是执行上述的结果
Working stackblitz demo 工作 stackblitz 演示
A simple explanation to the problem you are facing is highlighted in this question Named router outlet and lazy loaded modules with a link provided in this answer https://stackoverflow.com/a/49367379/13680115 ie auxilliary routes are not supported out of the box此问题中突出显示了您面临的问题的简单解释命名路由器出口和延迟加载模块,并在此答案https://stackoverflow.com/a/49367379/13680115中提供了链接,即辅助路由不受支持盒子
In the above post, In this comment the user highlights below在上面的帖子中,在此评论中,用户在下面突出显示
It seems that lazy load and auxiliary routes are not widely used together.
似乎懒加载和辅助路由并没有广泛使用。 We can see a lot of demos, separated but that's it.
我们可以看到很多演示,分开但仅此而已。 It's like no one uses it in a medium/large app
就像没有人在中/大型应用程序中使用它一样
In the same post there seems to be a workaround here在同一篇文章中, 这里似乎有一个解决方法
We create a nested route with a componentless parent route.我们创建一个带有无组件父路由的嵌套路由。 I have implemented that in the demo below and it works for the 1st level lazy loaded module.
我已经在下面的演示中实现了它,它适用于第一级延迟加载模块。 For the next level the routes are properly matched with no errors but unfortunately the component is not loaded, I believe a solution is to simply move the one level to the parent component.
对于下一个级别,路由正确匹配且没有错误,但不幸的是组件未加载,我相信解决方案是将一个级别简单地移动到父组件。 This way, one level of the auxilliary routes is loaded in the parent module while the other in the lazy loaded module
这样,一层辅助路由在父模块中加载,而另一层在延迟加载模块中
Is it really important to have different routers?拥有不同的路由器真的很重要吗? Can I ask what is the reason for that?
我能问一下这是什么原因吗? I manage to get it work with one router.
我设法让它与一台路由器一起工作。 Can you check it?
你能检查一下吗?
Here is the updated example: https://stackblitz.com/edit/angular-nested-auxiliary-routes-w1tcn4?file=src/app/app.component.html这是更新的示例: https://stackblitz.com/edit/angular-nested-auxiliary-routes-w1tcn4?file=src/app/app.component.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.