在 Angular 开发中，静态组件的使用场景已覆盖大部分业务需求，但面对表单动态渲染、弹窗内容定制、组件按需加载等场景，动态组件成为解决这类灵活化需求的核心方案。Angular 提供了多种实现动态组件的方式，其中基于ComponentFactoryResolver的方案是最基础且兼容性最好的经典实现，本文将从核心原理到完整实战，拆解动态组件的创建流程。
一、动态组件核心概念与适用场景
1. 什么是动态组件？
动态组件指在应用运行时（而非编译期）根据业务逻辑动态创建、挂载、销毁的组件，它不依赖模板中的固定标签，完全通过代码控制生命周期。
2. 核心适用场景
- 表单动态渲染：根据用户选择加载不同类型的表单控件（输入框、下拉框、日期选择器）；
- 弹窗 / 抽屉定制：弹窗内容根据业务场景动态替换不同组件；
- 仪表盘组件：用户自定义仪表盘布局，按需加载不同统计组件；
- 懒加载组件：降低首屏加载体积，仅在用户触发时加载非核心组件。
3. 核心 API 说明
实现动态组件的核心依赖以下 Angular API：
| API | 作用 |
|---|---|
ComponentFactoryResolver | 解析组件并生成ComponentFactory（组件工厂），是创建动态组件的核心入口 |
ViewContainerRef | 视图容器引用，定义动态组件的挂载位置（相当于 “容器占位符”） |
ComponentRef | 动态创建的组件实例引用，可用于操作组件属性、监听事件、销毁组件 |
Injector | 依赖注入器，为动态组件提供依赖（如服务） |
二、完整实现流程（步骤拆解）
我们以 “动态加载弹窗内容组件” 为例，完整实现一个基于ComponentFactoryResolver的动态组件方案，步骤如下：
步骤 1：准备基础环境与待加载的动态组件
首先创建两个核心文件：
- 弹窗容器组件（
dynamic-container.component.ts）：负责承载动态组件； - 测试用动态组件（
dynamic-content.component.ts）：需要被动态加载的组件。
1.1 创建动态内容组件（DynamicContentComponent）
// dynamic-content.component.ts import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-dynamic-content', template: ` <div class="dynamic-content"> <h3>{{ title }}</h3> <p>这是动态加载的组件内容</p> <button (click)="onClose()">关闭</button> </div> `, styles: [` .dynamic-content { padding: 20px; border: 1px solid #eee; border-radius: 8px; } `] }) export class DynamicContentComponent { // 接收父组件传入的参数 @Input() title!: string; // 向父组件发送事件 @Output() close = new EventEmitter<void>(); onClose() { this.close.emit(); } }1.2 声明动态组件（关键！）
动态组件必须在模块的entryComponents（Angular 9 + 可省略，但建议显式声明）和declarations中注册，确保 Angular 编译器能识别：
// app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { DynamicContainerComponent } from './dynamic-container.component'; import { DynamicContentComponent } from './dynamic-content.component'; @NgModule({ imports: [BrowserModule], declarations: [ AppComponent, DynamicContainerComponent, DynamicContentComponent // 声明动态组件 ], entryComponents: [DynamicContentComponent], // Angular 9+ 可选，IVY编译器自动处理 bootstrap: [AppComponent] }) export class AppModule { }步骤 2：创建容器组件，实现动态加载核心逻辑
容器组件需要完成以下核心操作：
- 获取
ViewContainerRef（挂载容器）； - 通过
ComponentFactoryResolver解析动态组件，生成工厂； - 利用工厂创建组件实例，并挂载到容器；
- 传递输入属性、监听输出事件；
- 提供销毁组件的方法。
// dynamic-container.component.ts import { Component, ComponentFactoryResolver, ViewContainerRef, ComponentRef, OnInit } from '@angular/core'; import { DynamicContentComponent } from './dynamic-content.component'; @Component({ selector: 'app-dynamic-container', template: ` <div> <h2>动态组件容器</h2> <button (click)="loadDynamicComponent()">加载动态组件</button> <button (click)="destroyDynamicComponent()" [disabled]="!componentRef">销毁动态组件</button> <!-- 动态组件挂载位置：通过模板变量获取ViewContainerRef --> <div #dynamicComponentContainer></div> </div> ` }) export class DynamicContainerComponent implements OnInit { // 动态组件实例引用，用于后续操作（传参、销毁） componentRef?: ComponentRef<DynamicContentComponent>; // 注入ViewContainerRef（通过模板变量）和ComponentFactoryResolver constructor( private componentFactoryResolver: ComponentFactoryResolver, private viewContainerRef: ViewContainerRef ) { } ngOnInit(): void { } // 加载动态组件核心方法 loadDynamicComponent(): void { // 1. 清空容器（避免重复加载） this.viewContainerRef.clear(); // 2. 解析动态组件，生成ComponentFactory const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicContentComponent); // 3. 创建组件实例并挂载到容器 this.componentRef = this.viewContainerRef.createComponent(componentFactory); // 4. 给动态组件传递输入属性 this.componentRef.instance.title = '动态加载的内容标题'; // 5. 监听动态组件的输出事件 this.componentRef.instance.close.subscribe(() => { this.destroyDynamicComponent(); alert('接收到动态组件的关闭事件'); }); } // 销毁动态组件 destroyDynamicComponent(): void { if (this.componentRef) { // 销毁组件实例 this.componentRef.destroy(); // 清空引用 this.componentRef = undefined; // 清空容器 this.viewContainerRef.clear(); } } // 组件销毁时，自动清理动态组件（防止内存泄漏） ngOnDestroy(): void { this.destroyDynamicComponent(); } }步骤 3：模板变量绑定 ViewContainerRef（关键细节）
上述代码中，ViewContainerRef的获取有两种方式：
方式 1：通过模板变量 +@ViewChild（推荐）
修改容器组件模板，通过@ViewChild获取挂载容器的ViewContainerRef：
// 补充容器组件代码：添加@ViewChild装饰器 import { ViewChild } from '@angular/core'; // ... 其他代码 ... @Component({ selector: 'app-dynamic-container', template: ` <!-- 模板变量 #dynamicComponentContainer --> <div #dynamicComponentContainer></div> ` }) export class DynamicContainerComponent { // 通过模板变量获取ViewContainerRef @ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer!: ViewContainerRef; // 修正loadDynamicComponent方法中的容器引用： loadDynamicComponent(): void { // 清空指定容器 this.dynamicComponentContainer.clear(); // 创建组件到指定容器 this.componentRef = this.dynamicComponentContainer.createComponent(componentFactory); } }方式 2：直接注入 ViewContainerRef（容器组件自身作为挂载点）
若容器组件自身作为动态组件的挂载点，可直接在构造函数注入ViewContainerRef（如步骤 2 初始代码）。
步骤 4：使用容器组件，验证动态加载效果
在根组件中引入容器组件，测试完整流程：
// app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h1>Angular动态组件示例</h1> <app-dynamic-container></app-dynamic-container> ` }) export class AppComponent { }三、进阶技巧与注意事项
1. 动态组件的依赖注入
若动态组件需要依赖服务（如HttpClient），无需额外配置，Angular 会自动通过根注入器提供依赖。若需自定义注入器，可在createComponent时传入：
// 自定义注入器示例 import { Injector } from '@angular/core'; const customInjector = Injector.create({ providers: [{ provide: 'customToken', useValue: '自定义值' }], parent: this.viewContainerRef.injector }); this.componentRef = this.viewContainerRef.createComponent(componentFactory, { injector: customInjector });2. 动态组件的生命周期
动态组件的生命周期与静态组件一致：
ngOnInit：组件创建后触发；ngOnDestroy：调用componentRef.destroy()时触发；- 需在容器组件的
ngOnDestroy中主动销毁动态组件，防止内存泄漏。
3. Angular 13+ 简化写法（替代 ComponentFactoryResolver）
Angular 13 引入了ViewContainerRef.createComponent的简化写法，无需手动解析ComponentFactory，直接传入组件类即可：
// 简化版加载逻辑（Angular 13+） loadDynamicComponent(): void { this.dynamicComponentContainer.clear(); // 直接传入组件类，无需ComponentFactoryResolver this.componentRef = this.dynamicComponentContainer.createComponent(DynamicContentComponent); this.componentRef.instance.title = '简化版动态加载'; }注：
ComponentFactoryResolver在 Angular 13 + 已标记为 “过时（deprecated）”，但仍可使用，简化写法本质是 Angular 内部自动处理了工厂解析。
4. 常见问题与解决方案
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 动态组件不显示 | 未获取正确的ViewContainerRef | 检查@ViewChild的read: ViewContainerRef配置，确保容器未被清空 |
| 输入属性未生效 | 组件实例创建前传参 | 必须在createComponent后通过componentRef.instance传参 |
| 内存泄漏 | 未销毁组件实例 | 在容器组件ngOnDestroy中调用componentRef.destroy() |
| 报错 “Component is not part of any NgModule” | 动态组件未在模块声明 | 确保动态组件加入declarations数组 |
四、总结
基于ComponentFactoryResolver的动态组件实现是 Angular 的经典方案，核心流程可总结为：
- 声明动态组件（模块
declarations）； - 获取
ViewContainerRef（挂载容器）； - 解析组件生成工厂（
ComponentFactoryResolver）； - 创建组件实例并挂载；
- 传参、监听事件、销毁组件。
虽然 Angular 13 + 提供了简化写法，但理解ComponentFactoryResolver的核心逻辑，能帮助我们更深入掌握 Angular 的组件渲染机制。动态组件的核心价值在于 “运行时灵活性”，合理使用可大幅提升应用的扩展性和性能（如按需加载），但需注意组件的生命周期管理，避免内存泄漏。
扩展阅读
- Angular 官方文档：动态组件
- Angular 依赖注入：Injector API
- Ivy 编译器对动态组件的优化：IVY 动态组件
