Angular2ネストされた同じルートのモジュールルーティング

Question

私はバックエンドアプリケーションで共通の問題に直面しています。

• レポート/ビュー/：ID
• campains /ビュー/：ID
• SUTS /ビュー/：ID
• 認定 は私がルートのこの種を調べることによって見ることができるいくつかのressourcesを得ました/ 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); 

は、キャンペーンモジュールは、レポートコンポーネントからのディレクティブを使用する必要があり、ここではコードですさ：

ここで

は問題です：私はルートに行くと、「/キャンペーン/ビュー/：ID」レポート・コンポーネント・モジュールからではなく、キャンペーンコンポーネントからルータのコンセント負荷の内容...

愚かなソリューション/ view ID：/ viewCampaign /：id ...）のような各モジュールで独自のルートを持つことになりますが、私は私のアプリのルーティング設定で何かが欠けていると思います....

この種の問題を解決する方法について？ ありがとう、 Olivier

Answer 1

ここでの最適な解決方法は、アプリの階層を作成する方法を変更することだと思います。

各モジュール（レポート、キャンペーン、およびスタット）に「ルート」コンポーネントを使用することで、「子」ルートを定義できます。ここで

が"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に提示された1つのように、「ルーティングモジュール」の方法に従うことをお勧めします：

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