Angular——在一个屏幕中命名路由不起作用

Question

我正在为我的学生规划一个带有侧边栏和内容区域的简单学习管理系统。 目标：使用命名的路由器出口在侧边栏中加载子主题，并在其旁边的内容区域中加载相关内容。到目前为止...

routes.ts

  export const routes: Routes = [
      { path: '', component: AppComponent },
      {
        path: 'planeGeo',
        component: PlaneGeometryMainComponent, 
        children: [
          {
            path: 'top',
            component: TestComponent,
            outlet: 'content',
          },
        ],
      },
 {
    path: 'planeGeo/top1',     //just for checking
    component: TestComponent, //just for checking
    outlet: 'content',        //just for checking
  },
    ];

app.component.html

     <mat-drawer-container class="mat-drawer-container" autosize>
          <mat-drawer #drawer class="sidenav" [opened]="true" mode="side">
            <div class="logo-container">
              <img class="logo" src="assets/img/logo.png" alt="" />
            </div>
        
            <router-outlet></router-outlet>
        
          </mat-drawer>
        
          <div class="example-sidenav-content">
            <mat-toolbar>
              <mat-icon class="menu-icon" (click)="drawer.toggle()">menu</mat-icon>
              <span>lernen mal anders</span>
              <span>Settings</span>
            </mat-toolbar>
            <div class="router-container">
        
              <router-outlet name="content"></router-outlet>
              
            </div>
          </div>
        </mat-drawer-container>

当我现在打开

http://localhost:.../planeGeo/(content:top)

时，会显示侧导航内容，但不会显示内容区域的内容。为了检查，我实现了最后一条路线，该路线在

http://localhost:.../(content:planeGeo/top1)

下工作。当然，侧边栏内容丢失了。 我刚刚开始使用命名路由，但我真的不知道如何显示这两个内容（侧边栏子主题以及在内容区域中单击它们后的相关内容）。 我知道目前这还不是一个伟大的架构，我只是在制作原型。如果有更专业知识的人可以提供帮助，那就太好了。我已经看过一些 YT 视频（示例 1、示例 2。提前致谢

Answer 1

我通过将插座放在单独的div中解决了这个问题，然后它就可以正常工作了。