Angular中动态创建组件对比ngIf指令的优势与差异探讨

一、*ngIf指令方式 #

优势 #

• 语法简洁直观，完全遵循模板驱动开发模式，学习成本低，代码可读性强
• 自动管控组件生命周期：当condition切换时，组件会自动触发ngOnInit、ngOnDestroy等钩子，无需手动干预
• 原生支持输入属性变更检测：@Input属性更新时会自动触发ngOnChanges钩子，数据绑定逻辑省心
• 模板中可直接绑定属性、事件，写法与静态组件完全一致，维护成本低

劣势 #

• 灵活性不足：组件的插入位置、时机完全由模板中的condition控制，无法在组件类中通过逻辑自由指定插入的DOM容器或动态调整挂载时机
• 提前编译开销：模板中声明的组件会被Angular提前编译，即便condition为false，组件工厂仍会被打包进应用，对最终包体积有轻微影响
• 组件类型固定：只能渲染预先在模板中声明的<app-modal>，无法根据运行时条件动态替换为其他组件类型

二、resolveComponentFactory + createComponent动态创建方式 #

优势 #

• 灵活性极强：可在组件类中通过代码精准控制组件的插入位置（指定任意ViewContainerRef作为容器）、挂载时机，还能根据运行时逻辑动态切换要创建的组件类型
• 支持按需加载：可结合懒加载模块，仅在需要时加载组件工厂，有效减少应用初始包体积
• 精细控制组件实例：能直接获取组件实例，手动设置输入属性、绑定输出事件，甚至调用组件内部方法，控制粒度远超*ngIf
• 适配动态内容场景：适合根据后端返回的组件配置渲染不同组件，或弹窗、侧边栏等需要动态挂载的业务场景

劣势 #

• 代码复杂度高：需手动处理组件工厂获取、实例创建、销毁等流程，还要管理ViewContainerRef引用，代码量更大，学习门槛更高
• 无自动ngOnChanges触发：手动设置@Input属性时，不会自动触发组件的ngOnChanges钩子，需手动调用detectChanges()（Angular 14+可使用setInput()）触发变更检测，或自行实现属性变化监听
• 生命周期管理繁琐：必须手动调用组件实例的destroy()方法销毁组件，否则易引发内存泄漏；容器销毁时也需确保组件实例被正确清理
• 模板绑定不便：无法像*ngIf那样在模板中直接编写属性、事件绑定，所有交互逻辑都需通过代码手动实现，可读性与维护性稍弱

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