Question

我打算创建一个如下所示的结构（每个routing.ts中的路由是为了说明我的想法）

app.module.ts
app.routing.ts  // Routes = [{ path: 'modA', module: moduleA }, { path: 'modB', module: moduleB }]
moduleA
  -- moduleA.module.ts
  -- moduleA.routing.ts  // Routes = [{ path: '', component: ListComponent }, { path: 'new', component: CreateComponent }]
  -- list.component.ts
  -- create.component.ts
moduleB
  -- moduleB.module.ts
  -- moduleB.routing.ts  // Routes = [{ path: 'a', component: AbcComponent }, { path: 'z', component: XyzComponent }]
  -- abc.component.ts
  -- xyz.component.ts

我想在moduleA.module中对moduleA中的任何内容进行分组，包括其路由。与moduleB相同。

然后我希望将moduleA和moduleB暴露给app.routing，以便我注册其模块路径。我期待：

/modA           show list component in moduleA
/modA/new       show create component in moduleA
/modB/a         show abc component in moduleB
/mobB/z         show xyz component in moduleB

如何在Angular4中创建上述结构？如果可能，请提供相同的可行代码。

Answer 1

我建议你，因为你已经将相关部分分解为使用延迟加载的模块，这会使你的应用程序性能提升。通过使用lazing loading，您可以立即获得所需的功能。每个模块将定义相对于自身的路由，模块将从app.routing文件中指定的基本路由提供。

app.routing.ts

RouterModule.forRoot([{
    path: 'modA',
    loadChildren: './moduleA/moduleA.module#ModuleA'
}, {
    path: 'modB',
    loadChildren: './moduleB/moduleB.module#ModuleB'
}]

moduleA.routing.ts

RouterModule.forChild([{
    path: '',
    component: ListComponent 
}, {
    path: 'new',
    component: CreateComponent
}]

moduleB.routing.ts

RouterModule.forChild([{
    path: 'a',
    component: AbcComponent 
}, {
    path: 'z',
    component: XyzComponent
}]

Answer 2

您需要使用子路线。 / new将是/ modA的孩子，如下所示：

.some-image-5

模块和子模块中的Angular4路由

2 个答案: