模块中子应用程序之间的Angular2路由 [英] Angular2 routing between sub-applications in modules

问题描述

我正在将Angular 2.1用于大型应用程序，该应用程序具有多个子模块，每个子模块定义按功能组织的子应用程序.顶级模块通过导入每个子应用程序的路由等，为RouterModule配置整个应用程序的所有子路由.因此，从子应用程序的角度来看，它相对于顶级应用程序将路由设置为的路由子应用程序不直接直接明确知道其顶级路由.

I'm using Angular 2.1 for a large application that has multiple sub-modules each defining sub-applications organized by feature. The top-level module configures the RouterModule with all child routes for the entire application by importing each sub-app's routes, etc. So from the sub-application's perspective, it routes relative to whatever the top-level application set the route to however the sub-application doesn't explicitly know what its top route actually is, directly.

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

Some of these sub-applications have summary panels for entities that are more fully defined/controlled in another sub-application. Conceptually the modules are setup like this:

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中实例化时编写为链接到其自身模块中的路由，而无需手动进行硬编码或重新组装路由.

I'm looking for a design pattern whereby the M2SummaryComponent can be written to link to a route within its own module while it is instantiated in Module 1's App1View without having to hard-code or re-assemble routes somehow, manually.

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

I had hoped this was a common-enough problem that the Angular team likely made it possible using something like router.navigate([APP2_VIEW_ROUTE, ...other params]), where one can simply pass the route object you used to configure RouterModule pertinent to the desired path. Looking at the source code however this doesn't seem to be an option. Instead we have examples of ActivatedRoute.

ActivatedRoute(下面的this.route)面临的问题是它将相对于App1View.因此，尝试使用router.navigate(['m2SpecialId'],{relativeTo: this.route})并非一帆风顺，因为它将与使我们到达App1View的路径有关，而不是回到模块2到App2View的首选路由中.

The problem faced with ActivatedRoute (this.route below) is that it will be relative to App1View. So trying to use router.navigate(['m2SpecialId'],{relativeTo: this.route}) is a non-starter since it will be relative to the path that got us to App1View, not back into module 2's preferred route to App2View.

据我所知，围绕这些问题的唯一的，比较优雅的方法是使每个子应用程序的模块都可以作为ModuleWithProviders导入，这样就可以选择将顶部信息通知给该模块.级别路由应用于其状态.然后编写帮助程序功能，使用其定义的路由来组合特定于该子应用程序的URI.

The only other, somewhat elegant, route (pun) around these issues as far as I can tell would be to make each sub-application's module be importable as a ModuleWithProviders such that, optionally, one can inform the module of the top-level route applied to its state. Then write up helper functions that assemble URIs specific to that sub-application using its defined routes.

感觉很简单……就像框架中已经存在解决方案或设计模式一样，因此就是这个问题.

That feels very boiler-plate...like perhaps the solution or design pattern already exists in the framework, hence this question.

问题:

是否存在使用Angular2路由器的设计模式，该模式将允许导入其他模块的组件在保持灵活的顶层路由定义的同时，干净地引用其自身模块的预配置路由?

Is there a design pattern for using the Angular2 Router that would allow components imported into other modules to cleanly reference their own module's pre-configured routes while maintaining a flexible top-level route definition?

推荐答案

如果要通过链接访问M1中的M2Component，则应使用RouterModule且不要在module1中导入module2.

If you want to access your M2Component in M1 via link then you should use RouterModule and do not import module2 in module1.

在module1内部使用

Inside module1 use

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

和在module2

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

现在您可以从路由"/module2"打开Module2Component.

Now you can open Module2Component from route '/module2'.

这篇关于模块中子应用程序之间的Angular2路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！