【问题标题】:Issue with Angular 2 routing: feature module doesn't load in the right placeAngular 2 路由问题:功能模块未在正确的位置加载
【发布时间】: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路由器插座。

【问题讨论】:

    标签: angular routing


    【解决方案1】:

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

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

    【讨论】:

      猜你喜欢
      • 2017-04-11
      • 1970-01-01
      • 2018-05-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-07-26
      • 2017-01-07
      • 1970-01-01
      相关资源
      最近更新 更多