具有相同路由的Angular2嵌套模块路由

Question

我在后端应用程序中遇到了一个常见问题。 我有几个资源可以通过咨询这种路线来查看：

• 报告/视图/:id
• campains/view/:id
• suts/view/:id
• certifications/view/:id

请注意，路线以相同的部分结束：/view/:id。

我的应用模块是：

App.module
|-MainLayoutModule
|- 报告模块
|- 活动模块
|- SutModule
|- ...

每个模块（mainlayoutModule 除外）都定义了自己的路由。

App.routing

         {
            path:'certification',
            loadChildren: './+certification/certification.module#CertificationModule',
            canActivate:[AuthGuard]
        },
        {
            path:'reports',
            loadChildren: './+report/report.module#ReportModule'
            canActivate:[AuthGuard],
        },

         {
            path:'suts',
            loadChildren: './+sut/sut.module#SutModule',
            canActivate:[AuthGuard]
        },
        {
            path:'campaigns',
            loadChildren: './+campaign/campaign.module#CampaignModule',
            canActivate:[AuthGuard]
        },...

报告.路由

import { Routes, RouterModule } from '@angular/router';
import { ReportDetailsComponent } from "./ReportDetails/report-details.component";
import { ReportDetailsResolver } from "./ReportDetails/report-details.resolver";
import { ReportListComponent } from "./ReportsList/report-list.component";

export const reportRoutes: Routes = [
{
    path: '',
    pathMatch: 'full',
    redirectTo: 'list'
},
{
    path: 'view/:id',
    component: ReportDetailsComponent,
    data: {
        pageTitle: 'Report detail'
    },
    resolve: {
        report: ReportDetailsResolver
    },
    pathMatch: 'full'
},
{
    path: 'list',
    component: ReportListComponent,
    data: {
        pageTitle: 'Reports Lists'
    },
    pathMatch: 'full'
}
];

export const reportRouting = RouterModule.forChild(reportRoutes);

Campaign.routing

import { Routes, RouterModule } from '@angular/router';
import { CampaignDetailsComponent } from './campaignDetails/campaign-details.component'
import { CampaignDetailsResolver } from './campaignDetails/campaign-details.resolver'
 import { CampaignListsComponent } from './campaignList/campaign-list.component'

export const campaignRoutes: Routes = [
{
    path: 'view/:id',
    component: CampaignDetailsComponent,
    data: {
        pageTitle: 'Campaign detail'
    },
    resolve: {
        campaign: CampaignDetailsResolver
    },
    pathMatch: 'full'
},
{
    path: 'lists',
    component: CampaignListsComponent,
    pathMatch: 'full'
}
];

export const campaignRouting = RouterModule.forChild(campaignRoutes);

活动模块需要使用报告组件中的指令，代码如下：

@NgModule({
 imports: [
  CommonModule,
  campaignRouting,
  ReportModule
],
declarations: [CampaignDetailsComponent,CampaignListsComponent],
providers:[CampaignDetailsResolver]
})
export default class CampaignModule { }

问题是：当我转到“/campaigns/view/:id”路线时，路由器出口从报告组件模块而不是从活动组件加载内容...

一个愚蠢的解决方案是在每个模块中都有唯一的路由（例如 /view Report/:id, /viewCampaign/:id...），但我认为我的应用程序路由配置中缺少某些内容...。

关于如何解决此类问题的任何想法？ 谢谢， 奥利维尔

Answer 1

我认为最好的解决方案可能是改变您创建应用层次结构的方式。

通过为每个模块（报告、活动和 stut）使用“根”组件，您可以定义“子”路由。

这是来自"Routing and Navigation" 指南的示例：

const crisisCenterRoutes: Routes = [
  {
    path: 'crisis-center',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        children: [
          {
            path: ':id',
            component: CrisisDetailComponent
          },
          {
            path: '',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(crisisCenterRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class CrisisCenterRoutingModule { }

另外，我建议遵循“路由模块”的方式，就像 same guide 上介绍的那样：

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroListComponent }    from './hero-list.component';
import { HeroDetailComponent }  from './hero-detail.component';
const heroesRoutes: Routes = [
  { path: 'heroes',  component: HeroListComponent },
  { path: 'hero/:id', component: HeroDetailComponent }
];
@NgModule({
  imports: [
    RouterModule.forChild(heroesRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class HeroRoutingModule { }