在没有子项的Angular中嵌套模块上的路由？

Question

我有3个模块：

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

每个模块都有自己的routing.module.ts。 我想建立像ROOT/module-a/module-b

这样的路线

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

1. Non-working version without children
2. Working version with children property

这两个版本的文件都有差异：

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

问题：我想独立存储路径：不使用children[]属性。如果可能的话 我不会children[]使用AppRoutingModule ModuleARoutingModule来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] })

children[]

但我得到了

  

错误：未捕获（在承诺中）：错误：无法匹配任何路由。网址   细分：＆＃39; module-a / module-b＆＃39;错误：无法匹配任何路由。网址   细分：＆＃39; module-a / module-b＆＃39;




工作片段

要解决此问题：

• 我在module-a.routing.ts中添加了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属性的情况下解决此问题，还是始终需要使用this？

Answer 1

欢迎来到stackoverflow！

如果您有多级路由器插座，则只需要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的非工作代码的更新版和工作版：cppreference/ignore