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

Question

我正在将Angular 2.1用于具有多个子模块的大型应用程序,每个子模块定义按功能组织的子应用程序.顶级模块通过导入每个子应用程序的路由等,为整个应用程序配置路由器模块以及所有子路由.因此,从子应用程序的角度来看,它相对于顶层应用程序设置路由的路由,但是子应用程序没有直接明确地知道它的主要路由实际是什么.

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

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'
    }
])

并在module2中

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

现在您可以从路径'/ module2'打开Module2Component.