Angular 5 在模块内定义 child 路由

Question

我有 Angular 5 个具有以下结构的应用程序：

/-app module
   /--- settings dashboard component
/-settings A module
   /--- list A component
   /--- edit A component
/-settings B module
   /--- list B component
   /--- edit B component

我想为这个模块和组件设置路由：

'settings' -> settings dashboard component (defined in app-routing.module.ts)
'settings/A' -> list A component (defined in a-routing.module.ts)
'settings/A/edit' -> list A edit component (defined in a-routing.module.ts)
'settings/B' -> list B component (defined in b-routing-module.ts)
'settings/B/edit' -> list B edit component (defined in b-routing-module.ts)

可能吗？我尝试将路线与 child 组合，但它不起作用。

Answer 1

好的，我在这里看到了你的担忧，但是，是的，这是可能的。

应用-routing.module

const routes: Routes = [{
  path: 'settings',
  component: SettingsDashboardComponent
}, {
  path: 'settings/A',
  loadChildren: './a/a.module#AModule'
}, {
  path: 'settings/B',
  loadChildren: './b/b.module#BModule'
}];

a-routing.module

const routes: Routes = [{
  path: '',
  component: AListComponent
}, {
  path: 'edit',
  component: AEditComponent
}];

b-路由就像 a-路由。

路线包含另一条路线的一部分并不重要，它适用于完全匹配。它确实关心延迟加载的部分，但仅限于它可以匹配延迟加载路由中某处的完整路由。

Angular 5 在模块内定义 child 路由

Angular 5 defining child routes inside modules

angular2-routing

angular

angular5