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

Question

我有一个奇怪的问题。我需要在延迟加载模块的根路由元素上设置辅助路由器出口，这些模块在应用程序路由模块中设置了 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' ) 放入混合中，以便我可以有辅助路由器插座？我到底做错了什么？

Answer 1

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

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

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

Angular4 router, Lazy loaded module child routes, named router outlets

angular2-routing

angular