Angular：如何在同名路由出口导航至不同组件

嘿，我来帮你把这个侧边栏路由的需求落地！你要实现的是在同一个aside命名路由出口里，从列表组件切换到详情组件，咱们一步步来：

1. 完善路由配置 #

首先得把你的路由配置补全，要把侧边栏的两个组件都关联到aside出口，并且作为主组件的子路由：

// routing.ts
import { Routes } from '@angular/router';
import { ReportsComponent } from './reports.component';
import { ReportsListComponent } from './reports-list.component';
import { ReportDetailComponent } from './report-detail.component';

const routes: Routes = [
  { 
    path: '', 
    component: ReportsComponent,
    children: [
      // 初始化时，在aside出口加载列表组件
      {
        path: '',
        component: ReportsListComponent,
        outlet: 'aside'
      },
      // 点击列表项后，在同一个aside出口加载详情组件
      {
        path: ':id',
        component: ReportDetailComponent,
        outlet: 'aside'
      }
    ]
  }
];

这里的关键是给子路由加上outlet: 'aside'，明确指定它们要渲染到哪个命名出口。

2. 在主组件模板中添加命名路由出口 #

打开ReportsComponent的模板，把router-outlet命名为aside，放在你的侧边栏容器里：

<!-- reports.component.html -->
<div class="app-container">
  <!-- 主内容区域 -->
  <main class="main-content">
    <!-- 这里放你的主内容 -->
  </main>

  <!-- 侧边导航栏，承载命名路由出口 -->
  <aside class="sidebar">
    <router-outlet name="aside"></router-outlet>
  </aside>
</div>

这样Angular就知道要把aside出口的组件渲染到这个侧边栏里了。

3. 列表组件中添加切换到详情的导航链接 #

在ReportsListComponent的模板里，给每个列表项设置routerLink，注意要指定目标出口：

<!-- reports-list.component.html -->
<ul class="report-list">
  <li *ngFor="let report of reportList">
    <a 
      [routerLink]="[{ outlets: { aside: [report.id] } }]"
      class="list-item"
    >
      {{ report.name }}
    </a>
  </li>
</ul>

这里的[{ outlets: { aside: [report.id] } }]是核心：它告诉Angular，把/:id路由对应的详情组件渲染到aside出口，替换掉原来的列表组件。

4. （可选）在详情组件添加返回列表的按钮 #

如果需要从详情页回到列表，只需要在ReportDetailComponent里加个返回按钮，路由指向空路径的aside出口：

<!-- report-detail.component.html -->
<div class="report-detail">
  <button 
    [routerLink]="[{ outlets: { aside: [''] } }]"
    class="back-btn"
  >
    返回列表
  </button>
  <!-- 详情内容 -->
</div>

注意事项 #

• 确保主路由的path: ''下包含了两个子路由，这样页面初始化时会自动加载列表组件到侧边栏
• 命名路由的routerLink必须用对象形式指定outlets，不能直接写字符串路径，否则Angular会找不到目标出口

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