0

我计划创建一个结构如下（每个routing.ts中的Routes是为了说明我的想法）

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 中的任何内容进行分组，包括其路由。与模块 B 相同。

然后我希望将 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 中创建上述结构？如果可能，请提供相同的可行代码。

4

2 回答 2

1

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

app.routing.ts

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

模块A.routing.ts

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

模块B.routing.ts

RouterModule.forChild([{
    path: 'a',
    component: AbcComponent 
}, {
    path: 'z',
    component: XyzComponent
}]
于 2017-10-03T15:48:53.677 回答
0

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

Routes = [{ path: 'modA', component: AComponent,
              children: [
                { path: 'new', component: childComponent }
                 ] 
          },
          { path: 'modB', component: BComponent }
         ]
于 2017-10-03T15:34:37.517 回答