Вложенная маршрутизация с вложенными модулями

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 также будет еще несколько модулей.

Каков наилучший способ размещения вложенных маршрутов в таком сценарии? Ленивый вид загрузки, но url выглядит как http://localhost/members/ вместо http://localhost/projects/12/members, хотя члены находятся под loadChildren.

Answer 1

попробовать ниже,

Проверить это Plunker

App Маршруты

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' 
      } 
     ] 
     } 
    ] 
    } 
]; 

Модуль Member Маршруты

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

Надеется, что это помогает !!