Angular多懒加载模块如何基于路由传参复用同一组件？

方案1：路由data传参 + 单通用容器组件（优先推荐，零重复代码） #

这个方案完全不需要为200余个模块派生独立组件，所有模块路由直接指向同一个提前写好的通用UI组件，通过路由配置的data字段传入当前模块专属的子组件集合、自定义配置即可，完全符合DRY原则，也适配「各父模块独立维护子路由、无全局路由总表、按需懒加载」的约束。

• 第一步：在所有懒加载模块都能访问到的共享模块中，声明导出通用容器组件
  组件内部直接通过ActivatedRoute读取当前路由携带的配置，用ngComponentOutlet渲染传入的动态子组件：

import { Component, OnInit, Type } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MySubComponent } from './my-sub-component.interface';

@Component({
  selector: 'app-common-container',
  templateUrl: './common-container.component.html',
  styleUrls: ['./common-container.component.scss']
})
export class CommonContainerComponent implements OnInit {
  subComponents: Type<MySubComponent>[] = [];
  moduleConfig: Record<string, any> = {};

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 路由切换时组件会重新实例化，直接读快照即可，无需订阅参数变化
    const routeData = this.route.snapshot.data;
    this.subComponents = routeData.subComponents || [];
    this.moduleConfig = routeData.moduleConfig || {};
  }
}

对应通用模板结构：

<!-- common-container.component.html -->
<div class="common-layout">
  <header>通用头部结构</header>
  <main class="content-area">
    <ng-container *ngFor="let comp of subComponents">
      <ng-container *ngComponentOutlet="comp"></ng-container>
    </ng-container>
  </main>
  <footer>通用底部结构</footer>
</div>

• 第二步：各懒加载模块配置自身子路由时，直接引入该通用组件，在路由data中传入当前模块专属的子组件集合即可，不需要编写任何新的组件类代码
  示例（任意懒加载模块的路由文件）：

// module-a-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 从共享模块引入通用容器组件，不需要重复声明
import { CommonContainerComponent } from '@shared/ui/common-container.component';
// 引入当前模块专属的子组件
import { SubA1Component } from './components/sub-a1/sub-a1.component';
import { SubA2Component } from './components/sub-a2/sub-a2.component';

const routes: Routes = [
  {
    path: '',
    component: CommonContainerComponent,
    data: {
      subComponents: [SubA1Component, SubA2Component],
      moduleConfig: { name: '业务模块A' }
    }
  }
];

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

注意：通用容器组件只需要在共享模块中声明、导出一次，所有懒加载模块直接引入使用即可，不会产生重复代码。

方案2：高阶组件工厂（适用于必须使用类继承的特殊场景） #

如果有特殊需求必须让每个模块持有独立的组件类（比如不同模块需要给容器配置不同的依赖注入令牌、存在少量差异化生命周期逻辑），不需要给每个子类重复编写@Component装饰器配置，可以封装一个高阶工厂函数，统一为子类注入相同的装饰器配置，从根源避免重复代码。

• 第一步：编写无装饰器的基类和组件工厂

import { Component, Type } from '@angular/core';
import { MySubComponent } from './my-sub-component.interface';

// 基类存放所有通用逻辑，不需要加@Component装饰器
export abstract class BaseContainerComponent {
  abstract subComponents: Type<MySubComponent>[];
  abstract moduleConfig: Record<string, any>;
  // 所有通用方法、共享生命周期逻辑都可以写在基类中
}

// 高阶工厂函数，统一注入相同的@Component配置
export function createContainerComponent(config: {
  subComponents: Type<MySubComponent>[],
  moduleConfig?: Record<string, any>
}) {
  @Component({
    // 模板、样式配置只在这里维护一次
    templateUrl: './common-container.component.html',
    styleUrls: ['./common-container.component.scss']
  })
  class CustomContainerComponent extends BaseContainerComponent {
    override subComponents = config.subComponents;
    override moduleConfig = config.moduleConfig || {};
  }
  return CustomContainerComponent;
}

• 第二步：各懒加载模块调用工厂生成专属组件类即可，不需要重复写装饰器
  示例：

// module-b-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { createContainerComponent } from '@shared/ui/base-container.component';
import { SubB1Component } from './components/sub-b1/sub-b1.component';
import { SubB2Component } from './components/sub-b2/sub-b2.component';

// 一行代码生成当前模块专属组件，无重复配置
const ModuleBContainer = createContainerComponent({
  subComponents: [SubB1Component, SubB2Component],
  moduleConfig: { name: '业务模块B' }
});

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

@NgModule({
  // 工厂生成的组件需要声明在当前模块中
  declarations: [ModuleBContainer],
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ModuleBRoutingModule {}

方案选型说明 #

• 90%以上的场景选方案1即可，代码量最少、维护成本最低，完全贴合Angular路由的设计逻辑，也不需要额外生成组件类。
• 方案2仅用于必须要求每个模块有独立组件类的特殊场景，可以完全规避NG6001错误——该错误本质是Angular编译器要求所有路由、模板中使用的组件必须带有@Component装饰器标记，工厂函数自动为生成的类加装饰器，同时把重复的装饰器配置收敛到了一处。

内容的提问来源于stack exchange，提问作者F-H