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

来自根模块的app.component（主路由器插座）：

<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时，我想：

  • 通过http endpoints 读取page1的配置 .

  • 生成指向该页面的所有已配置选项卡的链接作为选项卡导航 .

  • 单击链接后显示选项卡's content inside the TabsComponent' s路由器插座（默认情况下应显示第一个选项卡） . 它基本上意味着将功能模块加载到该路由器插座而不是主插座 .

我的两个问题是：

  • 如何正确配置路由我提供的所有功能模块都可以作为独立页面（现在可以使用）加载，也可以作为选项卡页面中的选项卡加载 .

  • 如何为选项卡式方案生成链接，以便我可以通过导航或直接从给定的URL转到特定选项卡？我想我需要包含页面和标签ID以及模块详细信息，以使所有部件正常工作，例如mysite.com/page1/tab1/module1/report/2 .

angular angular-routing angular-router