【发布时间】:2017-04-12 07:29:40
【问题描述】:
在我的 Angular 2 应用程序中,我试图重现此导航结构:
我的根应用程序组件中有一个大的路由器插座,我在其中加载我的营销网站,或者在用户登录时加载我的应用程序。
因此,一旦用户登录MyComponent(栗色),它就会被加载到红色路由器插座中,并且它有一个导航栏(MyHeader,黑色和灰色)和它自己的路由器插座(蓝色)。当我在导航栏中单击主页时,它会将仪表板组件加载到蓝色路由器插座中,一切看起来都很好。但是当我单击“福利”链接时,我希望它将BenefitsComponent(橙色和黄色)从BenefitsModule 加载到蓝色路由器插座中。但相反,它似乎将其加载到红色路由器插座中,而不是来自AppComponent 的那个,因为来自MyComponent 的导航栏消失了。
我创建了一个simplified version of my project on Github。
显然我缺少一些东西。谁能帮我弄清楚这是怎么回事?
编辑:只是为了添加一些上下文,我试图通过延迟加载好处模块来修改我的路由结构。最初我延迟加载了每个模块,但它在这里并不是很有用,因为好处部分应该与我的应用程序的登录部分一起加载。最初,我有这个延迟加载:
- 在
my.module.ts中我没有提到BenefitsModule,因为它是延迟加载的 -
在
my-routing.module.ts我有一个额外的行来加载模块:{ path: 'benefits', loadChildren: 'app/my/benefits/benefits.module#BenefitsModule', canActivateChild: [AuthGuard]}
在
benefits-routing.module.ts中我没有提到benefitspath,因为它存在于my-routing.module.ts
这很完美。正如您在the lazy-loading branch of my repository 中看到的那样。所以我想我的问题是如何在不丢失导航结构的情况下从这种延迟加载情况转变为急切加载情况。
编辑 2:在每个路由器出口上使用 activate 事件,我刚刚确认使用延迟加载时,我的好处组件被加载到 MyComponent 的路由器出口中,但没有延迟加载,它被加载到根 AppComponent路由器插座。
【问题讨论】: