Angular4 路由器，延迟加载模块子路由，命名路由器出口答案

【问题标题】：Angular4 router, Lazy loaded module child routes, named router outletsAngular4 路由器，延迟加载模块子路由，命名路由器出口
【发布时间】：2017-12-07 03:36:35
【问题描述】：

我有一个奇怪的问题。我需要在我的延迟加载模块的根路由元素上设置辅助路由器插座，这些模块在应用程序路由模块中设置了 URL 库。解释似乎有点难，但我将尝试解释这一点。

我的应用路由有这个

{
     path: 'shop',
     loadChildren: 'app/shop/shop.module#ShopModule',
     canActivate: [AuthGuardService]
},

这意味着所有的商店路线都应该以

开头

/商店

现在在商店模块中，我需要让主要内容出现在名为“ShopContent”的辅助路由器出口中。为此，我设置了 2 条测试路线，其中一条适合我。

店铺工具路线如下。

const routes: Routes = [
    {
        path: '',
        component: ShopComponent,
        children: [
            {
                path: 'overview',
                component: ShopMarketingComponent,
                outlet: 'ShopContent'
            },
            {
                path: 'products',
                component: ShopMarketingComponent,
                outlet: 'ShopContent'
            }
        ]
    },
    {
        path: 'test',
        component: ShopComponent,
        children: [
            {
                path: 'overview',
                component: ShopMarketingComponent,
                outlet: 'ShopContent'
            },
            {
                path: 'products',
                component: ShopMarketingComponent,
                outlet: 'ShopContent'
            }
        ]
    }
];

如您所见，空 '' 路由和 'test' 路由都有相同的子节点。我也有路由器插座设置。

<router-outlet name="ShopContent"></router-outlet>

我的军官问题似乎是什么？

我需要让“/shop/overview”路由在我的辅助插座中打开 ShopMarketingComponent，但是这个 routerLink 给了我一个未定义的路由错误

[routerLink]="['/shop', {outlets: {ShopContent: ['overview']}}]"

但是这个完全没问题

[routerLink]="['/shop/test', {outlets: {ShopContent: ['overview']}}]"

我的问题是，为什么我必须在混合中添加一个额外的 URL 段 ('/test')，以便我可以拥有辅助路由器插座？天哪，我在这里做错了什么？

【问题讨论】：

我有同样的问题，我渴望看到一个解决方案。在我看来，这是角度路由中的一个问题。
same here.. 我为此苦苦挣扎了几个小时，在各处上下移动配置.. 没有任何效果，然后我遇到了这个问题，对我来说看起来像错误。

标签： angular angular2-routing

【解决方案1】：

是否所有延迟加载的路由都显示在辅助插座中？如果是这样，您可以尝试将插座添加到延迟加载的路由配置中：

{
     path: 'management',
     loadChildren: 'app/management-tool/managementtool.module#ManagementToolModule',
     canActivate: [AuthGuardService],
     outlet: 'managementtoolcontent'
},

【讨论】：

并非所有路由器插座都显示在该上下文中，因此我无法将其标记为答案。但是我可以告诉你，我们通过在延迟加载模块中使用未命名的子路由器出口 () 解决了这个问题。这当然有效，因为我们只需要一个辅助路由器插座。不过，我会给你竖起大拇指，因为你的想法总体上是可行的，并且是我理解 Angular2 的一步。
无组件路由不能有命名出口集