模块和子模块中的 Angular4 路由

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 中对模块 A 中的任何内容进行分组，包括其路由。与模块 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 中创建上述结构？如果可能，请提供相同的可行代码。

Answer 1

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

Routes = [{ path: 'modA', component: AComponent,
              children: [
                { path: 'new', component: childComponent }
                 ] 
          },
          { path: 'modB', component: BComponent }
         ]

Answer 2

我建议，由于您已经将相关部分分解为模块，因此您可以使用延迟加载来提高应用程序的性能。通过使用延迟加载，您将立即获得所需的功能。每个模块将定义其相对于自身的路由，模块将从 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
}]

模块和子模块中的 Angular4 路由

Angular4 routing in module and submodule

angular

angular4-router