Angular 4及以上：如何为组件配置多独立路由出口的子组件

Absolutely! Angular has built-in support for named router outlets which is exactly what you need to load multiple child components into their own dedicated outlets at the same time. Let me break this down step by step for you:

1. 在父组件模板中定义命名路由出口 #

First, you'll need to update your parent component's template to use named router-outlet elements (not custom tags like <router-outlet-child1>). Here's how your template should look:

<section class="main-parent">
  <!-- 命名路由出口：child1 -->
  <router-outlet name="child1"></router-outlet>
  <!-- 命名路由出口：child2 -->
  <router-outlet name="child2"></router-outlet>
</section>

The name attribute is what distinguishes each outlet—this is how Angular knows which component to load where.

2. 配置对应的路由规则 #

Next, you'll configure your routes to map components to each named outlet. In your routing module (e.g., app-routing.module.ts), set up the parent route with child routes that specify the outlet property:

import { Routes, RouterModule } from '@angular/router';
import { ParentComponent } from './parent/parent.component';
import { Child1Component } from './child1/child1.component';
import { Child2Component } from './child2/child2.component';
import { Child1DetailComponent } from './child1/child1-detail.component';
import { Child2DetailComponent } from './child2/child2-detail.component';

const routes: Routes = [
  {
    path: 'parent', // 父路由的访问路径
    component: ParentComponent,
    children: [
      // 默认加载：访问/parent时自动加载这两个组件
      {
        path: '',
        outlet: 'child1',
        component: Child1Component
      },
      {
        path: '',
        outlet: 'child2',
        component: Child2Component
      },
      // 带路径的配置：访问/parent/detail时加载详情组件
      {
        path: 'detail',
        outlet: 'child1',
        component: Child1DetailComponent
      },
      {
        path: 'detail',
        outlet: 'child2',
        component: Child2DetailComponent
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

• The outlet property in each child route matches the name attribute of your <router-outlet> in the template.
• Using an empty path means the component will load automatically when the parent route is accessed (e.g., /parent).

3. 导航到多出口路由 #

If you need to navigate to a state where multiple outlets are updated (e.g., switching from default components to detail components), you'll use a specific object format for routing:

模板中的路由链接 #

<!-- 从父组件模板导航到详情状态 -->
<a [routerLink]="[{ outlets: { child1: ['detail'], child2: ['detail'] } }]">
  Load Detail Components
</a>

代码中导航（组件类内） #

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

constructor(private router: Router) { }

loadDetailComponents(): void {
  this.router.navigate([
    {
      outlets: {
        child1: ['detail'],
        child2: ['detail']
      }
    }
  ]);
}

The outlets object uses the outlet names as keys, and the value is an array representing the route path (just like you'd use in a normal routerLink).

关键注意事项 #

• Case Sensitivity: The outlet name in the template and route configuration must match exactly (uppercase/lowercase matters).
• Parent Route Parameters: If your parent route has parameters, include them before the outlets object in your navigation:

  // 示例：父路由带ID参数
  this.router.navigate([
    '/parent', 123, // 父路由参数
    { outlets: { child1: ['detail'], child2: ['detail'] } }
  ]);
  

• Empty Paths: Using an empty path for child routes ensures components load immediately when the parent route is accessed—perfect for your initial use case.

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