2016-11-28 23 views
3

在我的角2的应用程序加载,我试图重现此导航结构:问题与角2路由:功能模块没有在正确的地方

enter image description here

我在一个大的出口路由器我的根应用程序组件,其中我要么加载我的营销网站,要么我的应用程序在用户登录时。 因此,一旦用户登录MyComponent(在褐色)被加载到红色路由器插座,它有一个导航(MyHeader,黑色和灰色)和自己的路由器插座(蓝色)。当我在导航栏中单击Home时,它会将仪表板组件加载到蓝色路由器插座中,并且一切都很正常。但是当我点击好处链接时,我希望它将BenefitsModuleBenefitsComponent(橙色和黄色)加载到蓝色路由器插座中。但相反,它似乎将其加载到红色路由器插座中,而不是从AppComponent中取出,因为从MyComponent导航栏消失。

我已创建simplified version of my project on Github

显然我缺少一些东西。任何人都可以帮我弄清楚发生了什么?

编辑:只是要添加一些上下文,我试图修改我的路由结构从懒加载福利模块。最初我懒加载每个模块,但它不是真的很有用,因为好处部分应该加载我的应用程序的登录部分。本来,我有这个懒加载:

  • my.module.ts我没有提到的BenefitsModule因为它是延迟加载
  • my-routing.module.ts我有一个附加行加载模块:

    {路径: '好处',loadChildren: '应用程序/我的/收益/ benefits.module#BenefitsModule',canActivateChild:[AuthGuard]}

  • benefits-routing.module.ts我没有提及benefits p的ath因为它存在于my-routing.module.ts

而且这个工作完美。正如你可以在the lazy-loading branch of my repository中看到的那样。所以我想我的问题是如何从这个懒加载的情况下,到一个热切的加载情况,而不会丢失我的导航结构。

编辑2:在每个路由器出口采用activate事件,我只是确认,使用延迟加载的时候,我的好处组件加载到MyComponent的,但没有延迟加载路由器的出口,它被加载到根AppComponent路由器出口。

回答

3

所以我调查了你的问题。问题是你想BenefitsComponent加载MyComponent。但是如果他不是MyComponent的孩子,他怎么能这样做呢?所以为了解决这个问题,你需要像延迟加载一样将它添加到子列表中。唯一的是,你不想在这里延迟加载。但是,由于路由器的RC6(也是版本),你可以传递一个返回模块的函数。这使得切换到延迟加载也非常简单,只需删除导入并使用字符串文字指向模块。

我在您的GitHub存储库中添加了一个PR,以向您展示它是如何工作的。 https://github.com/sarbogast/ng2-routing-example/pull/1