Angular 带布线插座的嵌套布线不起作用

我用的是Angular 9.1.7。我想为子组件实现不同的路由。例如，图形视图应具有2个路由器出口，其中根据路由呈现我的主要内容的上部和下部区域。不知怎么的，我没有弄明白，它不起作用

我想做到的是以下几点。关于URI：

localhost:4200/或localhost:4200/主页

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

MainContentComponent
-> GameDetailsComponent

localhost:4200/details/：gameTitle

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

MainContentComponent
-> GameDetailsComponent

这是我的模板

main-content.component.html

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

<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>

我认为模板是正确的，一定有一些路线我错过了