带有嵌套模块的嵌套路由 [英] Nested routing with nested modules

问题描述

我是第一次使用Angular 2应用.

I am working on an Angular 2 app for the first time.

我的路由与此类似-

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

我可以从Internet上找到的所有参考文献，教程和文章.我只发现了与此类似的方法-

From all the references, tutorials and articles I could find on the internet. I only found approach similar to this -

[
  {
    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
                  }
                ]
              }
            ] 
          },
        ]
      }
    ]
  }
]

这很好.但是，我认为，这是一种严格类型化的方法，可以在存在大量组件的情况下创建.

This works well. However, I feel, this is sort of strictly typed approach and can create when there are a lot of components in place.

我已经创建了称为ProjectModule，MemberModule，TaskModule的功能模块.

I have created feature modules called ProjectModule, MemberModule, TaskModule. There will be several more modules under ProjectModule too..

在这种情况下，嵌套路由的最佳方法是什么?延迟加载的工作方式很正常，但是url看起来像 http://localhost/members/而不是 http://localhost/projects/12/members ，即使member在 loadChildren .

What is the best way to have nested routes in place in such scenario? The lazy loading sort of works but url appears like http://localhost/members/ instead of http://localhost/projects/12/members even though members is under loadChildren.

推荐答案

请尝试以下

检查此柱塞

应用路由

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

希望这会有所帮助！

这篇关于带有嵌套模块的嵌套路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！