模块中子应用程序之间的 Angular2 路由

Question

我将 Angular 2.1 用于一个大型应用程序，该应用程序具有多个子模块，每个子模块定义按功能组织的子应用程序。顶级模块通过导入每个子应用程序的路由等为整个应用程序配置具有所有子路由的 RouterModule。因此，从子应用程序的 Angular 来看，它的路由相对于顶级应用程序设置的路由，但是子应用程序并不直接明确地知道它的顶级路由实际上是什么。

其中一些子应用程序具有在另一个子应用程序中更完全定义/控制的实体的摘要面板。从概念上讲，模块是这样设置的:

Module 1:
    Imports Module 2
    Routes for Module 1
    Component1A
    App1View (contains Component1A, M2SummaryComponent)

Module 2:
    Routes for Module 2 (one exported as APP2_VIEW_ROUTE, type Route)
    Component2A
    Component2B
    M2SummaryComponent
    App2View (contains Component2A, Component2B)
    ...etc.

我正在寻找一种设计模式，借此可以编写 M2SummaryComponent 以链接到其自己模块中的路由，同时它在模块 1 的 App1View 中实例化，而无需以某种方式手动硬编码或重新组装路由。

我曾希望这是一个足够普遍的问题，Angular 团队可能会使用类似 router.navigate([APP2_VIEW_ROUTE, ...other params]) 之类的东西来解决这个问题，在这里人们可以简单地传递用于配置与所需路径相关的 RouterModule 的路由对象。查看源代码，但这似乎不是一个选项。相反，我们有 ActivatedRoute 的示例。

ActivatedRoute(下面的this.route)面临的问题是它会相对于App1View。因此，尝试使用 router.navigate(['m2SpecialId'],{relativeTo: this.route}) 是行不通的，因为它将相对于让我们到达 App1View 的路径，而不是返回进入模块 2 到 App2View 的首选路径。

据我所知，围绕这些问题的唯一其他稍微优雅的路线(双关语)是使每个子应用程序的模块都可以作为 ModuleWithProviders 导入，这样，可以选择通知模块顶部级路由应用于其状态。然后编写辅助函数，使用其定义的路由组装特定于该子应用程序的 URI。

这感觉非常样板...好像解决方案或设计模式可能已经存在于框架中，因此这个问题。

问题:

是否有一种使用 Angular2 路由器的设计模式允许导入到其他模块的组件干净地引用它们自己模块的预配置路由，同时保持灵活的顶级路由定义？

Answer 1

如果您想通过链接访问 M1 中的 M2Component，那么您应该使用 RouterModule 而不要在 module1 中导入 module2。

在 module1 内部使用

RouterModule.forRoot([
    {
        path: 'module2',
        loadChildren: 'path-of-module2/module2.module#Module2Module'
    }
])

在模块 2 中

RouterModule.forChild([
    {
        path: '',
        component: Module2Component
    }
])

现在您可以从路径“/module2”打开 Module2Component。