Angular 2路由问题：功能模块没有在正确的位置加载

Question

在我的Angular 2应用程序中，我正在尝试重现此导航结构：

我的根应用程序组件中有一个很大的路由器插座，我在其中加载我的营销网站，或者当用户登录时我的应用程序。 因此，一旦用户登录，MyHeader（在栗色中）被加载到红色路由器插座中，它有一个导航栏（BenefitsComponent，黑色和灰色），以及它自己的路由器插座（蓝色） ）。当我在导航栏中单击Home时，它会将仪表板组件加载到蓝色路由器插座中，一切都很好。但是当我点击“好处”链接时，我希望它将BenefitsModule（橙色和黄色）从AppComponent加载到蓝色路由器插座中。但相反，它似乎将其加载到红色路由器插座中，而不是来自MyComponent，因为my.module.ts的导航栏消失了。

我创建了一个simplified version of my project on Github。

显然我缺少一些东西。谁能帮我弄清楚发生了什么？

编辑：只是为了添加一些上下文，我试图从延迟加载好处模块的东西修改我的路由结构。最初我懒得加载每个模块，但它在这里不是很有用，因为好处部分应该加载我的应用程序的登录部分。最初，我有懒惰加载：

• in BenefitsModule我没有提到my-routing.module.ts，因为它是懒惰的
在benefits-routing.module.ts中的

• 我还有一行来加载模块：

  {路径：＆＃39;福利＆＃39;，loadChildren：＆＃39; app / my / benefits / benefits.module＃BenefitsModule＆＃39;，canActivateChild：[AuthGuard]}

• 并且在benefits我没有提到my-routing.module.ts路径，因为它出现在activate

这完美无缺。正如您在the lazy-loading branch of my repository中所看到的那样。所以我想我的问题是如何从这种懒惰的情况转变为急切的加载情况而不会失去我的导航结构。

编辑2：在每个路由器插座上使用query = (from c in entities.tDocumentStatus join d in entities.tTOCStructures on c.DocumentId equals d.DocumentID join e in entities.tUsers on d.LastUpdatedBy equals e.UserUID orderby c.AssignedDate descending where c.AssignedDate >= startDate && c.AssignedDate <= endDate && (docMode <=0 || c.StatusId == docMode) select new ReportMapper() { DocumentName = d.FolderName, AssignedDate = c.AssignedDate, ReviewStatus = c.tStatu.StatusName, ActionPerformedBy = e.FirstName + " " + e.LastName }); if(!flag){ query = query.Skip(pageNumber * 10).Take(50); } 事件，我刚刚确认使用延迟加载时，我的优势组件被加载到MyComponent中的路由器插座但没有延迟加载，它被加载到root AppComponent路由器插座。

Answer 1

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

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