带有路由出口的嵌套路由不起作用

Question

我正在使用Angular 9.1.7。我想为子组件实现不同的路由。例如，图表视图应具有2个路由器出口，根据路由显示主要内容的上部和下部区域。不知何故我做错了，它不起作用。

我要完成的工作如下。在URI上：

localhost：4200 /或localhost：4200 / home

MainContentComponent
-> GraphViewComponent
--> StackedLineGraphComponent
--> CarouselViewComponent

本地主机：4200 / details /：gameTitle

MainContentComponent
-> GameDetailsComponent

这是我的模板。

main-content.component.html

<router-outlet name="main-content"></router-outlet>

graph-view.component.html

<div class="breadcrumb-container">
  <app-breadcrumb></app-breadcrumb>
</div>
<div class="graph-wrapper">
  <router-outlet name="graph"></router-outlet>
</div>
<hr>
<div class="main-content-wrapper">
  <router-outlet name="below-graph-content"></router-outlet>
</div>

app-routing.module.ts

const routes: Routes = [
{path: '', redirectTo: 'home', pathMatch: 'full'},
{
  path: 'home', component: MainContentComponent, children:
    [
      {
        path: '', outlet: 'main-content', component: GraphViewComponent, children:
          [
            {path: '', outlet: 'graph', component: StackedLineGraphComponent},
            {path: '', outlet: 'below-graph-content', component: CarouselViewComponent}
          ]
      },
      {path: 'details/:gameTitle', outlet: 'main-content', component: GameDetailsComponent}
    ]
}];

我认为模板是正确的，必定有某些我缺少的路线。