Angular 16+独立组件嵌套路由实现问题：组件内无法配置路由

需求：

• 通过两个独立路由配置+两个router-outlet实现嵌套路由
• 尽可能避免将所有路由路径都写到应用全局路由里
• 期望结构：一级路由/one对应OneComponent，/two对应TwoComponent；TwoComponent内部的router-outlet加载/two/three（ThreeComponent）和/two/four（FourComponent）

尝试过的方案及问题 #

在通过router-outlet加载的独立组件TwoComponent中，直接用provideRouter提供内部路由配置，代码如下：

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule, Routes, provideRouter } from '@angular/router';

export const twoRoutes: Routes = [
    {
        path: 'three',
        loadComponent: () => import('./three.component').then(a => a.ThreeComponent),
    },
    {
        path: 'four',
        loadComponent: () => import('./four.component').then(a => a.FourComponent),
    },
];

@Component({
    selector: 'app-two',
    standalone: true,
    imports: [CommonModule, RouterModule],
    providers: [provideRouter(twoRoutes)],
    template: `
        <div>Hello Component TWO</div>
        <router-outlet></router-outlet>
    `,
    styles: ``,
})
export class TwoComponent {}

但运行报错：不能在组件级提供者中使用provideRouter，因为Router是应用级单例服务，只能在应用根注入器中初始化。

已发现的替代方案（不满足需求） #

使用loadChildren可以实现嵌套路由，但必须修改全局路由，让它知晓嵌套路由的存在，示例代码如下：

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

export const routes: Routes = [
    {
        path: 'one',
        loadComponent: () => import('./one.component').then(a => a.OneComponent),
    },
    {
        path: 'two',
        loadComponent: () => import('./two.component').then(a => a.TwoComponent),
        loadChildren: () => import('./two.component').then(t => t.twoRoutes),
    },
];

这种方案需要全局路由感知子路由的存在，不符合“尽量避免全局路由声明所有子路径”的需求。

正确解决方案 #

使用RouterModule.forChild()替代provideRouter在独立组件中注册子路由，这样既可以把路由配置封装在组件内部，又不会违反Angular的路由服务注入规则。

修改后的TwoComponent代码 #

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

export const twoRoutes: Routes = [
    {
        path: 'three',
        loadComponent: () => import('./three.component').then(a => a.ThreeComponent),
    },
    {
        path: 'four',
        loadComponent: () => import('./four.component').then(a => a.FourComponent),
    },
];

@Component({
    selector: 'app-two',
    standalone: true,
    imports: [CommonModule, RouterModule.forChild(twoRoutes)], // 替换为forChild注册子路由
    template: `
        <div>Hello Component TWO</div>
        <router-outlet></router-outlet>
    `,
    styles: ``,
})
export class TwoComponent {}

全局路由配置 #

只需配置到TwoComponent即可，无需额外声明子路由：

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

export const routes: Routes = [
    {
        path: 'one',
        loadComponent: () => import('./one.component').then(a => a.OneComponent),
    },
    {
        path: 'two',
        loadComponent: () => import('./two.component').then(a => a.TwoComponent),
        // 无需loadChildren，子路由已在TwoComponent内部注册
    },
];

原理说明 #

RouterModule.forChild()的作用是向现有的根路由实例添加子路由配置，不会重新创建Router服务，完全符合Angular的路由设计规范。这样一来，TwoComponent的子路由定义完全封装在自身文件中，全局路由只需要知道/two这个一级路径即可，满足“避免全局路由声明所有子路径”的需求。

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