英文:
Angular component won't load in default outlet using an empty path, but will with an outlet name
问题
以下是已翻译的内容：
我在应用程序组件中有几个路由出口。除了一个之外，所有路由出口都有一个名称。
<router-outlet name="menu"></router-outlet>
<router-outlet></router-outlet>
<router-outlet name="sidebar"></router-outlet>
目前，我的根路由配置如下：
[
{
path: 'mypath',
loadChildren: () => import('./my-main.module').then((m) => m.MyMainModule)
}
]
延迟加载的“主模块”路由配置如下：
[
{
path: ':myMainId',
resolve: { myMainData: MyMainDataResolver },
children: [
{
path: ':mySubId',
resolve: { mySubData: MySubDataResolver },
loadChildren: () =>
import('./my-sub.module').then((m) => m.MySubModule) // 需要mySubData
},
{ path: '', component: MyMainComponent } // 需要myMainData
],
},
{ path: '', component: MenuComponent, outlet: 'menu' }
]
最后，我的延迟加载的“子模块”路由配置如下：
[{ path: '', component: MySubComponent, outlet: 'sidebar' }]
使用上述配置，我的MyMainComponent不加载（构造函数/onInit不被调用）。然而，如果我为默认的router-outlet指定一个名称，并在路由配置中指定MyMainComponent的路由的出口名称，所有组件都会呈现。
类似地，如果我删除url的:mySubId段，并将主要出口保持无名称状态，那么MyMainComponent会呈现。
因此，似乎发生了MyMainComponent的路由和MySubComponent的路由（或其父级）之间的某种冲突。
我怀疑这与这两个路由都为空有关，可能是它们都匹配，但我不明白为什么会这样，因为一个已经指定了出口名称，而另一个没有。
提前感谢您提供的任何帮助。
英文:
I have a few router outlets in my app component. All except one have a name.
<router-outlet name="menu"></router-outlet>
<router-outlet></router-outlet>
<router-outlet name="sidebar"></router-outlet>
Currently, my root route config specifies the following:
[
{
path: 'mypath',
loadChildren: () => import('./my-main.module').then((m) => m.MyMainModule)
}
]
The lazy-loaded 'main module' route config looks like this:
[
{
path: ':myMainId',
resolve: { myMainData: MyMainDataResolver },
children: [
{
path: ':mySubId',
resolve: { mySubData: MySubDataResolver },
loadChildren: () =>
import('./my-sub.module').then((m) => m.MySubModule) // Needs mySubData
},
{ path: '', component: MyMainComponent } // Needs myMainData
],
},
{ path: '', component: MenuComponent, outlet: 'menu' }
]
And finally, my lazy-loaded 'sub module' route config looks like this:
[{ path: '', component: MySubComponent, outlet: 'sidebar' }]
Using the above configuration, my MyMainComponent does not load (constructor/onInit not called). However, if I give the default router-outlet a name and specify the outlet name for MyMainComponent's route in the route config, all of the components render.
Similarly, if I drop the :mySubId segment of the url, and leave the main outlet nameless, the MyMainComponent does render.
So, some sort of conflict seems to be happening between MyMainComponent's route and MySubComponent's route (or its parent).
I suspect it has something to do with both of those routes being empty and perhaps both somehow matching, but I don't see how that could be when one has an outlet name specified and the other does not.
Thanks in advance for any help you can provide.
答案1
得分: 0
以下是翻译好的部分：
为了达到我想要的效果，我不得不将MyMainComponent路由配置复制到MySubComponent路由配置的同级：
[
{
path: '',
component: MyMainComponent,
},
{
path: '',
component: MySubComponent,
outlet: 'sidebar'
}
]
这允许主组件在以下两种情况下加载到默认的router-outlet，这正是我想要的：
http://mypath/mymainid
http://mypath/mymainid/mysubid
我曾以为MyMainComponent应该匹配空路径，不管它是否被定义为子路径的一部分，但我错了。然而，我认为它应该这样，或者应该有某种选项允许它这样做，因为现在必须配置两次似乎有点奇怪。
英文:
In order to achieve what I was after, I had to duplicate the MyMainComponent route config into a sibling of the MySubComponent route config:
[
{
path: '',
component: MyMainComponent,
},
{
path: '',
component: MySubComponent,
outlet: 'sidebar'
}
]
This allows the main component to load within the default router-outlet in the following two scenarios, which is what I was ultimately after:
http://mypath/mymainid
http://mypath/mymainid/mysubid
I was under the impression that MyMainComponent should match the empty path regardless of whether it was defined as part of the child path or not, but I was wrong. In my opinion, however, I think that it should, or that there should be some sort of option to allow it to do so, because having to configure it twice like I now have feels weird.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论