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

Question

我在后端应用中遇到了一个常见问题。 我有几个ressources可以通过咨询这种途径来查看：

• 报告/视图/：ID
• campains /视图/：ID
• suts /视图/：ID
• 认证/ view /：id

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

我的应用程序模块是：

App.module
    | -MainLayoutModule
        | - ReportModule
        | - CampaignModule
        | - 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] 
     },... 

Report.routing

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 { } 

这里的问题是：当我去的路线“/运动/视图/：id为”从报表组件模块，而不是从运动部件的路由器网点加载内容...

个愚蠢的方案将在每个模块（像/查看报告/：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 { }