嵌套路由与嵌套模块

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

成员模块路由

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

希望这可以帮助!!