如何在Angular 2+中为单个路由关联两个组件？

根据你的应用结构和需求——同一个路由下同时渲染header区域的路由依赖组件和content区域的主内容组件，最适合的方案是使用命名路由出口（named router outlets），它允许我们把不同的组件渲染到页面的不同指定区域，完美匹配你的场景。下面是具体实现步骤：

1. 修改根组件模板，添加命名路由出口 #

首先在你的根组件模板中，给需要动态渲染路由组件的区域添加对应的路由出口：

• 给header区域新增一个命名出口（比如叫headerOutlet），用于渲染和路由关联的头部组件
• content区域保留默认的匿名路由出口，渲染主内容组件

修改后的模板示例：

<div id="header">
  <!-- 始终显示的右侧菜单，不依赖路由 -->
  <right-menu-component></right-menu-component>
  <!-- 命名路由出口：渲染和当前路由匹配的头部组件 -->
  <router-outlet name="headerOutlet"></router-outlet>
</div>
<div id="content">
  <!-- 默认路由出口：渲染主内容组件 -->
  <router-outlet></router-outlet>
</div>

2. 配置路由规则 #

在路由配置中，给同一个路径同时配置两个路由项（或通过子路由），分别指定组件对应的出口：

方式一：平级路由配置 #

直接在路由数组中为同一个path定义两个路由，分别对应默认出口和命名出口：

import { Routes } from '@angular/router';
// 导入你的组件
import { CheckoutHeaderComponent } from './checkout-header.component';
import { CheckoutContentComponent } from './checkout-content.component';
import { ProductsHeaderComponent } from './products-header.component';
import { ProductsContentComponent } from './products-content.component';
import { DefaultHeaderComponent } from './default-header.component';

const routes: Routes = [
  // 收银台路由：同时渲染头部和内容组件
  { path: 'checkout', component: CheckoutContentComponent },
  { path: 'checkout', component: CheckoutHeaderComponent, outlet: 'headerOutlet' },
  
  // 商品列表路由：同理
  { path: 'products', component: ProductsContentComponent },
  { path: 'products', component: ProductsHeaderComponent, outlet: 'headerOutlet' },
  
  // 默认路由：访问根路径时，渲染默认头部和首页内容
  { path: '', component: HomeContentComponent },
  { path: '', component: DefaultHeaderComponent, outlet: 'headerOutlet' },
  
  // 404路由（可选）
  { path: '**', redirectTo: '' }
];

方式二：子路由配置 #

如果你更喜欢结构化的配置，可以用子路由来关联命名出口的组件：

const routes: Routes = [
  {
    path: 'checkout',
    component: CheckoutContentComponent,
    // 子路由指定命名出口的组件
    children: [
      { path: '', component: CheckoutHeaderComponent, outlet: 'headerOutlet' }
    ]
  },
  {
    path: 'products',
    component: ProductsContentComponent,
    children: [
      { path: '', component: ProductsHeaderComponent, outlet: 'headerOutlet' }
    ]
  },
  // 其他路由...
];

3. 路由导航的写法 #

当你需要导航到目标路由时，需要同时指定两个出口的路由信息，确保两个组件都能正确渲染：

模板中使用routerLink #

<!-- 导航到收银台路由 -->
<a [routerLink]="[{ outlets: { primary: 'checkout', headerOutlet: 'checkout' } }]">收银台</a>

<!-- 导航到商品列表路由 -->
<a [routerLink]="[{ outlets: { primary: 'products', headerOutlet: 'products' } }]">商品列表</a>

注：primary是默认路由出口的名称，如果你没给默认出口命名，Angular会默认使用primary作为它的标识。

代码中使用router.navigate #

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

constructor(private router: Router) {}

// 导航到收银台
goToCheckout() {
  this.router.navigate([
    { outlets: { primary: 'checkout', headerOutlet: 'checkout' } }
  ]);
}

额外细节说明 #

• 如果某些路由不需要特定的头部组件，可以给headerOutlet配置一个默认组件（比如DefaultHeaderComponent），这样未匹配到特定头部组件的路由会自动渲染这个默认组件
• 懒加载模块的场景下，同样可以在懒加载的路由配置中指定命名出口的组件，写法和上面一致
• 确保你的路由配置已经通过RouterModule.forRoot(routes)（根模块）或RouterModule.forChild(routes)（子模块）注册到Angular中

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