如何限制Angular的router-outlet仅在指定页面区域加载组件？

我使用Angular 13和PrimeNG 13开发，现有基础组件ContentComponent，期望点击菜单项后，对应组件显示在主内容区域。当前代码如下：

ContentComponent模板：

<div>
    <div class="sidePanel">
        <div class="menu">           
            <p-panelMenu  [model]="items" [multiple]="false"></p-panelMenu> 
        </div>
        <div class="main">             
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

PrimeNG MenuItems定义：

ngOnInit() {
  this.items1 = [{
    label: 'Users',
    items: [
      {
        label: 'Reports',
        id: 'reports',
        routerLink: ['reports']
      }
      // 其他菜单项...
    ]
  }];
}

路由配置（app-routing.module.ts）：

const routes: Routes = [
    // 其他路由...
  {
    path: 'content',
    children: [
      {
        path: '',
        component: ContentComponent
      },
      {
        path: 'reports',
        component: ReportsComponent
      },
      // 其他子路由...
    ]
  }
];

点击“Reports”项后，ReportsComponent占满整个屏幕，导航面板消失。请问如何限制router-outlet仅在指定区域加载组件？

1. 修正路由配置 #

问题核心是路由结构错误：当前content路由未指定父组件，导致访问/content/reports时，Angular直接渲染ReportsComponent替换整个页面。需要将ContentComponent设为content路由的父组件，子路由通过它内部的router-outlet加载：

const routes: Routes = [
  // 其他路由...
  {
    path: 'content',
    component: ContentComponent, // 父路由渲染ContentComponent
    children: [
      { path: '', redirectTo: 'reports', pathMatch: 'full' }, // 可选：设置默认子路由
      { path: 'reports', component: ReportsComponent }
      // 其他子路由...
    ]
  }
];

2. 调整菜单项的routerLink #

确保路由导航是在ContentComponent的上下文内，使用相对路径或完整绝对路径：

this.items1 = [{
  label: 'Users',
  items: [
    {
      label: 'Reports',
      id: 'reports',
      routerLink: ['./reports'] // 相对路径，基于当前/content路径
      // 或使用绝对路径：routerLink: ['/content/reports']
    }
    // 其他菜单项...
  ]
}];

3. 确认模板布局 #

你的ContentComponent模板已经正确将router-outlet放在main区域，只要路由配置修正，ReportsComponent就会加载到这个区域，侧边菜单会保持显示。

内容的提问来源于stack exchange，提问作者Dave