Angular Router：如何处理对子模块路由器的委托

能否请您给我建议，如何处理高级组件router-outlet和子组件中的其他组件router-outlet？

在我看来，在这种情况下，我需要将子组件包含在自己的模块中，并使用为其提供自己的路由器RouterModule.forChild。配置完成后，我可以在上显示主要组件localhost:4200/main，但是在执行以下操作时出现此错误localhost:4200/main/section：

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'main/section'

我在app.component.html中：

<router-outlet></router-outlet>

在这个app.component.html我想显示MainViewComponent下localhost:4200/main

MainViewComponent组件位于其自己的模块中，具有自己的逻辑以在其模块中显示其子组件，<router-outlet></router-outlet>并且应通过类似localhost:4200/main/section，的url访问localhost:4200/main/section2。

app / app-routing.module.ts（由app.module.ts导入）

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainViewComponent } from './main-view-module/main-view/main-view.component';

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

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

app / main-view-module / app-routing.module.ts（由app / main-view-module / main-view.module.ts导入）

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SectionViewComponent }      from './main-view-module/section-view.component';
import { Section2ViewComponent }      from './main-view-module/section2-view.component';

const routes: Routes = [
  { path: '', redirectTo: 'section', pathMatch: 'full' },
  { path: 'section', component: SectionViewComponent },
  { path: 'section2', component: Section2ViewComponent }
];

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