ネストされたモジュールを含むネストされたルーティング

Question

初めてAngular 2アプリで作業しています。

私はこれに似ているルーティング -

/home 
/projects/ 
/projects/:id/members 
/projects/:id/members/:id/tasks 

を、私はインターネット上で見つけることができるすべての参照、チュートリアルとの記事から。私はこのようなアプローチしか見つけられませんでした -

[ 
    { 
    path: "home", component: HomeComponent 
    }, 
    { 
    path: "", redirectTo: "home", pathMatch: "full" 
    }, 
    { 
    path: 'projects', 
    component: ProjectComponent, 
    children: [ 
     { 
     path: ':id', 
     component: ProjectDetailsComponent, 
     children: [ 
      { 
      path: 'members', 
      component: MemberComponent, 
      children : [ 
       { 
       path: ':id', 
       component : MemberDetailsComponent, 
       children : [ 
        { 
        path: 'tasks', 
        component : TasksComponent 
        } 
       ] 
       } 
      ] 
      }, 
     ] 
     } 
    ] 
    } 
] 

これはうまくいきます。しかし、これは厳密に型付けされたアプローチの一種であり、多くのコンポーネントがある場合に作成できます。

ProjectModule、MemberModule、TaskModuleというフィーチャーモジュールを作成しました。 ProjectModuleにはさらにいくつかのモジュールがあります。

このようなシナリオでは、ネストされたルートを配置する最も良い方法は何ですか？メンバーがloadChildrenになっていても、遅延ロードの種類はありますが、URLはhttp://localhost/projects/12/membersの代わりにhttp://localhost/members/のように表示されます。

Answer 1

以下しようと、

チェックこのPlunker

アプリケーションルート

const appRoutes: Routes = [ 
    { path: '', redirectTo: '/home', pathMatch: 'full' }, 
    { path: 'home', component: HomeComponent }, 
    { 
    path: 'projects', 
    loadChildren: 'app/project.module#ProjectModule' 
    } 
]; 

プロジェクトモジュールのルート

const projectRoutes: Routes = [ 
    { 
    path: '', 
    component: ProjectComponent , 
     children: [ 
     { 
     path: ':id', 
     component: ProjectDetailsComponent, 
     children:[ 
      { 
      path: 'members', 
      loadChildren: 'app/member.module#MemberModule' 
      } 
     ] 
     } 
    ] 
    } 
]; 

のメンバーモジュールのルート

const memberRoutes: Routes = [ 
    { 
    path: '', 
    component: MemberComponent, 
     children: [ 
     { 
     path: ':id', 
     component: MemberDetailsComponent 
     } 
    ] 
    } 
]; 

は、この情報がお役に立てば幸いです！