在Angular的嵌套路由器出口中动态加载模块

Question

我有一个Angular 5应用程序，可以动态加载功能模块并在主路由器插座中显示其内容。下面的代码显示了我的基本配置：

来自根模块（主路由器出口）的应用程序组件：

<router-outlet></router-outlet>

路由root配置（从传递的URL动态加载模块）：

const routes: Routes = [
    { path: 'module1', loadChildren: ...},
    { path: 'module2', loadChildren: ...}
];

export const AppRoutes = RouterModule.forRoot(routes);

功能模块之一的示例路由：

const routes: Routes = [
    { path: 'report/:reportId', component: ReportComponent}
];

export const AppRoutes = RouterModule.forChild(routes);

及其包含另一个路由器出口的app.component：

<router-outlet></router-outlet>

这样的配置可以正常工作-如果我转到mysite.com/module1，则加载了module1，angular将控制权交给了功能模块路由器，因此访问mysite.com/module1/report/2会在功能模块的路由器出口内显示ReportComponent。 。

我现在要做的是将TabsComponent添加到我的主模块中，以便能够从多个选项卡组成页面，其中每个选项卡将包含一个特定的模块。我想以某种方式将已指定的路由用于root用户，而不用手动将其作为TabsComponent的子代重复，并将功能模块加载到TabsComponent的路由器出口中。

tabs.component：

<tabs-navigation></tabs-navigation>
<router-outlet></router-outlet>

tabs.configuration（通过http在运行时动态加载）：

{
    pageId: "page1",
    tabs: [{
        tabId: "tab1",
        module: "module1",
        params: "report/2"
    }, {
        tabId: "tab2",
        module: "module2"
    }]
}

以及我的路由配置中用于root的其他行：

{ path: 'tabs/:pageId', component: TabsComponent}

从现在开始，当我访问mysite.com/tabs/page1时：

1. 通过http端点读取page1的配置。
2. 将指向该页面所有已配置标签的链接生成为标签导航。
3. 单击链接后，在TabsComponent的路由器出口内显示选项卡的内容（默认情况下，应显示第一个选项卡）。从根本上讲，这意味着将功能模块而不是主要模块加载到该路由器出口。

我的两个问题是：

1. [如何提供我想让所有功能模块作为独立页面（现在可以正常工作）或作为选项卡式页面中的选项卡加载的方式，如何正确配置路由。
2. 如何为选项卡式场景生成链接，以便我可以通过导航或直接从给定URL转到特定选项卡？我想我需要同时包含页面和标签ID以及模块详细信息，以使所有部分正常工作，例如mysite.com/page1/tab1/module1/report/2。

我有一个Angular 5应用程序，可以动态加载功能模块并在主路由器插座中显示其内容。下面的代码显示了我的基本配置：来自root的app.component ...

Answer 1

@ syntax_error，这就是我的做法。我对Angular也有类似的要求。我的应用程序有一个页面，显示多个用户，每个用户都有一个对应的详细视图/路线。例如