Angular2定义从子路由模块

问题描述：

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

我会尽力让它很简单：

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

有没有办法做到这一点？

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

答

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

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

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

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

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

答

做这样的事情：

//... 
    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进口阵列。

答

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

在你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)。

Angular2定义从子路由模块

相关推荐