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

问题描述

我第一次开发 Angular 2 应用.

我有类似的路由 -

/home/项目//projects/:id/members/projects/:id/members/:id/tasks

来自我可以在互联网上找到的所有参考资料、教程和文章.我只找到了与此类似的方法 -

<预><代码>[{路径:家"，组件:HomeComponent},{路径:"，重定向到:家"，路径匹配:完整"},{路径:'项目'，组件:项目组件，孩子们: [{路径:':id',组件:项目详细信息组件，孩子们: [{路径:'成员'，组件:成员组件，孩子们 : [{路径:':id',组件:MemberDetailsComponent，孩子们 : [{路径:'任务'，组件:任务组件}]}]},]}]}]

这很好用.但是，我觉得这是一种严格类型化的方法，可以在有很多组件时创建.

我创建了名为 ProjectModule、MemberModule、TaskModule 的功能模块.ProjectModule 下也会有更多的模块..

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

解决方案

试试下面，

检查这个 Plunker

应用路由

 const appRoutes: Routes = [{ path: '', redirectTo: '/home', pathMatch: 'full' },{ path: 'home', 组件: HomeComponent },{路径:'项目'，loadChildren: 'app/project.module#ProjectModule'}];

项目模块路线

const projectRoutes: Routes = [{小路: ''，组件:项目组件，孩子们: [{路径:':id',组件:项目详细信息组件，孩子们:[{路径:'成员'，loadChildren: 'app/member.module#MemberModule'}]}]}];

成员模块路线

const memberRoutes: Routes = [{小路: ''，组件:成员组件，孩子们: [{路径:':id',组件:MemberDetailsComponent}]}];

希望这有帮助！！

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

I have routing similar to this -

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

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.

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

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.

解决方案

try below,

Check this Plunker

App Routes

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

Project Module Routes

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

Member Module Routes

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

Hope this helps!!

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