在没有孩子的情况下在 Angular 中的嵌套模块上进行路由？

Question

我有 3 个模块：

1. AppModule是我的根模块，
2. ModuleAModule ，
3. ModuleBModule 。

每个模块都有自己的routing.module.ts 。 我想构建像ROOT/module-a/module-b这样的路由

我准备了 2 个版本（有和没有children属性）：

1. 没有孩子的非工作版本
2. 带有子属性的工作版本

这些文件对于两个版本都有差异：

• 应用程序/模块/模块-a/模块-a.routing.module.ts
• 应用程序/模块/模块-b/模块-b.routing.module.ts

问题：我想独立存储路径：不使用children[]属性。 如果可能的话。
我不在AppRoutingModule中为ModuleARoutingModule使用children[] 。 但为什么我不能在ModuleARoutingModule和ModuleBRoutingModule之间做同样的事情？

非工作片段

app.routing.ts

const routes: Routes = [
    { path: '', redirectTo: '', pathMatch: 'full' }
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forRoot(routes),
        ModuleARoutingModule,
    ],
    exports: [ RouterModule ]
})

module-a.routing.ts

const routes: Routes = [
    { path: 'module-a', component: ModuleAComponent }
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(routes),
        ModuleBRoutingModule,
    ],
    exports: [RouterModule]
})

module-b.routing.ts

const routes: Routes = [
    { path: 'module-b', component: ModuleBComponent }
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(routes),
    ],
    exports: [RouterModule]
})

但我明白了

错误：未捕获（承诺）：错误：无法匹配任何路线。 URL 段：'module-a/module-b' 错误：无法匹配任何路由。 URL 段：'module-a/module-b'

工作片段

要解决此问题：

• 我在module-a.routing.ts中添加了children[]属性，并从导入中删除ModuleBRoutingModule 。

module-a.routing.ts

const routes: Routes = [
    {
        path: 'module-a',
        component: ModuleAComponent,
        children: [
            // via loadChildren or component
            { path: 'module-b', loadChildren: '../module-b/module-b.module#ModuleBModule' },
        ]
    },
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(routes),
        // ModuleBRoutingModule,
    ],
    exports: [RouterModule]
})

• 我还重写了module-b.routing.ts （使path=''为空）。

module-b.routing.ts

const routes: Routes = [
    { path: '', component: ModuleBComponent }
];

题

我可以在没有children[]财产的情况下解决这个问题，还是我总是需要使用children ？

Answer 1

欢迎来到计算器！

如果您有多个级别的路由器插座，则只需要children属性。

你试过这个吗：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ModuleARoutingModule } from './modules/module-a/module-a.routing.module';
import { ModuleBRoutingModule } from './modules/module-b/module-b.routing.module';

const routes: Routes = [
  { path: '', redirectTo: '', pathMatch: 'full', }
];

@NgModule({
  imports: [
    ModuleARoutingModule,
    ModuleBRoutingModule,
    RouterModule.forRoot(routes),
  ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

更新：

我花了一些时间在你的 stackblitz 代码上，你确实需要使用children ，因为你有嵌套的路由器插座。 如果删除嵌套的路由器插座，则不需要使用children 。

我有您的非工作代码的更新和工作版本，这里没有children ： https ://stackblitz.com/edit/embedded-routes-without-children-kd1hms