Angular如何将不同路径路由到同一懒加载子模块的不同组件？

方案一：简洁修改父路由配置 #

直接调整父模块的路由，将空路径指向懒加载子模块，然后在子模块里直接定义/a和/b的路由规则，这样既保持一级路径，又能通过同一懒加载模块加载。

父模块（app-routing.module.ts） #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 空路径指向懒加载子模块，子模块内的路由会直接映射到根路径下
  {
    path: '',
    loadChildren: () => import('./child/m-child.module').then(m => m.ChildModule)
  }
];

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

子模块路由（m-child-routing.module.ts） #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AComponent } from './a.component';
import { BComponent } from './b.component';

const routes: Routes = [
  { path: 'a', component: AComponent },
  { path: 'b', component: BComponent }
];

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

这样访问/a会加载AComponent，/b加载BComponent，两者都通过懒加载ChildModule加载，路径保持一级，没有嵌套。

方案二：保留现有父路由配置 #

如果不想修改父模块已有的/a、/b路由配置，可以通过容器组件+路由数据的方式实现：

父模块（app-routing.module.ts） #

保留原有配置，给每个路由添加data标记区分目标组件：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'a',
    loadChildren: () => import('./child/m-child.module').then(m => m.ChildModule),
    data: { targetComponent: 'a' } // 添加标记
  },
  {
    path: 'b',
    loadChildren: () => import('./child/m-child.module').then(m => m.ChildModule),
    data: { targetComponent: 'b' } // 添加标记
  }
];

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

子模块新增容器组件（child-container.component.ts） #

创建一个容器组件，根据父路由的data动态加载目标组件：

import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AComponent } from './a.component';
import { BComponent } from './b.component';
import { ComponentFactoryResolver } from '@angular/core';

@Component({
  template: '<div #componentContainer></div>'
})
export class ChildContainerComponent implements OnInit {
  @ViewChild('componentContainer', { read: ViewContainerRef }) container!: ViewContainerRef;

  constructor(
    private route: ActivatedRoute,
    private cfr: ComponentFactoryResolver
  ) { }

  ngOnInit(): void {
    const target = this.route.parent?.data.get('targetComponent');
    let targetComponent;

    switch (target) {
      case 'a':
        targetComponent = AComponent;
        break;
      case 'b':
        targetComponent = BComponent;
        break;
    }

    if (targetComponent) {
      const factory = this.cfr.resolveComponentFactory(targetComponent);
      this.container.createComponent(factory);
    }
  }
}

子模块路由（m-child-routing.module.ts） #

将空路径指向容器组件：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ChildContainerComponent } from './child-container.component';

const routes: Routes = [
  { path: '', component: ChildContainerComponent }
];

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

这种方式不需要修改父路由的核心配置，通过容器组件动态分发到目标组件，同样满足需求。

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