如何在一个辅助路由中嵌套使用另一个辅助路由？

Alright, let's get this sorted out. Nested auxiliary routing can feel tricky at first, but once you map the component hierarchy to your route config properly, it'll click. Here's exactly how to set this up for your structure:

1. 配置路由模块（AppRoutingModule） #

First, you need to define your routes to mirror the nested auxiliary outlets. Your route config should look something like this:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppMain } from './app-main.component';
import { AppProjects } from './app-projects.component';
import { AppSteps } from './app-steps.component';

const routes: Routes = [
  // 主路由（对应primary router-outlet，默认无需指定outlet）
  {
    path: '',
    component: AppMain,
    children: [
      // 第一层辅助路由：对应name="projects"的router-outlet
      {
        path: 'projects',
        component: AppProjects,
        outlet: 'projects',
        children: [
          // 第二层嵌套辅助路由：对应name="steps"的router-outlet
          {
            path: 'steps',
            component: AppSteps,
            outlet: 'steps'
          }
        ]
      }
    ]
  }
];

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

关键注意点：

• 每个辅助路由必须通过outlet属性指定对应的<router-outlet>名称
• 嵌套的辅助路由要放在父组件路由的children数组里，严格匹配组件层级关系

2. 确认模板结构 #

Your existing template structure looks correct, but double-check that each named outlet is properly placed (no typos in the name attribute):

<!-- Primary router-outlet（默认路由出口，无需name） -->
<router-outlet>
  <!-- 顶级组件AppMain -->
  <app-main>
    <!-- 第一层辅助路由出口：name="projects" -->
    <router-outlet name="projects">
      <!-- AppProjects组件 -->
      <app-projects>
        <!-- 第二层嵌套辅助路由出口：name="steps" -->
        <router-outlet name="steps">
          <app-steps></app-steps>
        </router-outlet>
      </app-projects>
    </router-outlet>
  </app-main>
</router-outlet>

3. 导航到多层辅助路由 #

To navigate to both auxiliary routes at once, you can use either routerLink in templates or the Router service in components.

模板中使用routerLink #

<a [routerLink]="['/', { outlets: { projects: ['projects'], steps: ['steps'] } }]">
  加载Projects和Steps
</a>

组件中使用Router.navigate() #

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

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

loadNestedAuxRoutes() {
  // 一次性加载两层辅助路由
  this.router.navigate([
    '/',
    {
      outlets: {
        projects: ['projects'],
        steps: ['steps']
      }
    }
  ]);
}

// 分步加载（先加载projects，再加载steps）
loadStepByStep() {
  // 第一步：加载projects辅助路由
  this.router.navigate([{ outlets: { projects: ['projects'] } }]);
  
  // 第二步：在projects路由激活后，加载steps辅助路由（需依赖当前激活路由）
  setTimeout(() => {
    this.router.navigate(
      [{ outlets: { steps: ['steps'] } }],
      { relativeTo: this.route.firstChild }
    );
  }, 1000);
}

常见问题排查 #

• 确保路由路径、组件类名、outlet名称的拼写完全一致（Angular对大小写敏感）
• 嵌套辅助路由必须配置在父组件路由的children中，不能直接挂在主路由下
• 如果使用懒加载模块，要把嵌套辅助路由配置在对应的懒加载路由的children数组里

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