2017-03-07 98 views
1

首先是孩子的路线,我已经看到了这个帖子,这似乎是接近我的问题,但我承认我被那种迷失:How to route to a Module as a child of a Module - Angular 2 RC 5Angular2定义从子路由模块

我会尽力让它很简单:

  • 我有我的app.component.html文件有一个<router-outlet>
  • 在这第一个插座,我的MasterModule加载MasterComponent,它有另一个<router-outlet>。从我的MasterRoutingModule,我可以从我的MasterComponent定义我的孩子路线。
  • 我有我的其他模块(EquipmentSLModule),它有自己的路线,我的目标是从我的EquipmentSLRouting添加子路线(将在我的第二个<router-outlet>中从MasterComponent加载)。

有没有办法做到这一点?

N.B:我知道现在还没有代码,我会在一段时间内编辑并添加一些代码。

回答

2

如果你想渲染你加载的模块在组件<router-outlet></router-outlet>罩下,你需要配置为特定组件的子组件。 我为你需要什么,看看这里是链接Plunker

imports: [BrowserModule, 
     RouterModule.forRoot([{ 
       path: '', 
       pathMatch: 'full', 
       redirectTo: '/home' 
      }, 
      { 
       path: 'home', 
       component: AppHome 
       children: [{ 
        path: 'ModuleA', 
        loadChildren: 'src/ModuleA' 
       }] 
      }, 
     ]) 
    ] 
+0

@亚历克斯伯涅是一个简单的例子是你的想法,或者它有什么不同? –

+0

是的,这看起来不错,因为其他答案! plunkr确实有帮助。非常感谢 –

+0

我是否只需要通过延迟加载的模块? –

0

做这样的事情:

//... 
    const EquipmentSLRoutes: Routes = [ 
     { path: 'equipment-sl', component: EquipmentSLComponent }, 
     { path: 'equipment-sl/:id', component: EquipmentSLDetailComponent } 
    ]; 

    @NgModule({ 
     imports: [ 
     //... 
     RouterModule.forChild(EquipmentSLRoutes) 
     ], 
     exports: [ 
     //... 
     RouterModule 
     ] 
    }) 
    export class EquipmentSLModule { } 

这个模块添加到您的MasterModule进口阵列。

1

让我们看看我是否明白你的要求。每个模块都可以拥有自己的路由。然后,您可以参考该路由作为这样的路径的孩子:

在你AppRouting,从加载路线:

export const ROUTES: Routes = [ 
    { 
     path: 'masterRoute', 
     loadChildren: './path/to/MasterRoutingModule.module#MasterRoutingModule' } 
    } 
] 

在你MasterRouting,加载EquipmentSLModule的路线以及利用在<router-outlet>所述MasterModule的根组件:

export const ROUTES: Routes = [ 
    { path: '', component: MasterComponent }, //root 
    { 
     path: 'otherRoute', 
     loadChildren: './path/to/EquipmentSLModule.module#EquipmentSLModule' } 
    } 
] 

这将加载从EquipmentSLModule路由作为在MastRoutingModule路由。

在您的EquipmentSLModule中,您将为该模块导入路径为RouterModule.forChild(routes),与MasterModule相同。 AppModule将使用RouterModule.forRoot(routes)