帶嵌套模塊的嵌套路由

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之下，但延遲加載排序的作品卻出現如http://localhost/members/而不是http://localhost/projects/12/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 
     } 
    ] 
    } 
]; 

希望這有助於！