Angular多Router Outlet问题：侧边栏路由内容不显示

开发Angular应用时配置了多路由出口：一个用于主页面，另一个位于侧边栏区域。点击按钮后URL正确变化，但侧边栏对应的路由出口始终无内容展示。

AppModule路由配置 #

const appRoutes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)}
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

主页面仅包含基础的 <router-outlet></router-outlet>。

AdminModule路由配置 #

const adminRoutes: Routes = [
  { path: '', component: AdminComponent },
  { path: 'brands', component: BrandsComponent, outlet: 'admin_content' }
];

@NgModule({
  declarations: [
    AdminComponent,
    BrandsComponent
  ],
  imports: [
    RouterModule.forChild(adminRoutes)
  ]
})
export class AdminModule { }

AdminComponent模板代码 #

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav mode="side" opened>
        <div><button mat-icon-button (click)="showBrands()"><mat-icon fontSet="material-symbols-outlined">box_edit</mat-icon></button>Brands</div></mat-sidenav>
    <mat-sidenav-content><router-outlet name="admin_content"></router-outlet></mat-sidenav-content>
</mat-sidenav-container>

showBrands方法代码 #

showBrands(): void {
  this.router.navigate(['admin', {outlets:{ admin_content: ['brands']}}]);
}

点击Brands按钮后，URL变为 http://localhost:4200/admin/(admin_content:brands)，但admin_content路由出口仍为空。请问哪里配置错误了？

问题出在辅助路由的层级匹配上：

• 核心问题：brands路由被配置为与AdminComponent同级的路由，但admin_content辅助出口是嵌套在AdminComponent内部的。Angular要求嵌套组件内的辅助路由必须配置为对应父组件的子路由，才能正确关联到内部的路由出口。

修复步骤 #

1. 修改AdminModule的路由配置，将brands路由设为AdminComponent的子路由：

const adminRoutes: Routes = [
  { 
    path: '', 
    component: AdminComponent,
    children: [
      { path: 'brands', component: BrandsComponent, outlet: 'admin_content' }
    ]
  }
];

2. （可选）优化导航代码，使用相对路径更规范：

import { ActivatedRoute } from '@angular/router';

constructor(private router: Router, private route: ActivatedRoute) {}

showBrands(): void {
  this.router.navigate([{ outlets: { admin_content: ['brands'] } }], { relativeTo: this.route });
}

修改后，辅助路由会正确识别AdminComponent内部的admin_content出口，加载BrandsComponent内容。

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