Angular4路由器，延迟加载模块子路由，命名路由器插座

我有一个奇怪的问题。我需要在我的延迟加载模块的根路由元素上设置辅助路由器插座，这些模块在应用路由模块中设置了URL基础。解释似乎有点困难，但我会试着解释这一点。Angular4路由器，延迟加载模块子路由，命名路由器插座

我的应用程序的路由有这个

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

，这意味着所有的管理工具路线应与

/管理

现在在管理模块开始，我需要具备的主要内容出现在名为“managementtoolcontent”的辅助路由器插座中。为此，我设置了2条测试路线，其中一条适合我。

管理工具路由如下。

const routes: Routes = [ 
    { 
     path: '', 
     component: ManagementToolComponent, 
     children: [ 
      { 
       path: 'overview', 
       component: ManagementToolMarketingComponent, 
       outlet: 'managementtoolcontent' 
      }, 
      { 
       path: 'products', 
       component: ManagementToolMarketingComponent, 
       outlet: 'managementtoolcontent' 
      } 
     ] 
    }, 
    { 
     path: 'test', 
     component: ManagementToolComponent, 
     children: [ 
      { 
       path: 'overview', 
       component: ManagementToolMarketingComponent, 
       outlet: 'managementtoolcontent' 
      }, 
      { 
       path: 'products', 
       component: ManagementToolMarketingComponent, 
       outlet: 'managementtoolcontent' 
      } 
     ] 
    } 
];

正如你所看到的，空的''路线和'测试'路线都有相同的孩子。我也有路由器插座设置。

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

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

我需要有“/管理/概述”的路线在我的第二出口打开managementToolMarketingComponent，但这种routerLink给我一个未定义的路由错误

[routerLink]="['/management', {outlets: {managementtoolcontent: ['overview']}}]"

然而，这一个工程完全罚款

[routerLink]="['/management/test', {outlets: {managementtoolcontent: ['overview']}}]"

我的问题是，为什么我必须把一个额外的网段（'/测试'）混合，以便我可以有辅助路由器插座？在上帝的名字中，我在这里做错了什么？

来源

2017-07-03 Karl Johan Vallner

我遇到了同样的问题，我非常希望看到解决方案。在我看来，这是角度路由中的一个问题。 –

在这里也是一样..我在这里挣扎了好几个小时，无处不在地移动了配置。没有任何工作，然后我遇到了这个问题，看起来像我的bug。 –

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

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

来源

2017-07-03 19:53:00 DeborahK

并非所有路由器插座都显示在该上下文中，所以我不能将其标记为答案。然而，我可以告诉你，我们通过在懒惰加载的模块中使用非命名子路由器插座（）来解决问题。这当然只适用，因为我们只需要一个辅助路由器插座。然而，我会给你一个赞许，因为你的想法一般，并且在理解Angular2方面向前迈进了一步。 –

Angular4路由器，延迟加载模块子路由，命名路由器插座

回答

相关问题