Angular中Entry Components是否属于Dumb Components？重构疑问

先明确Smart/Dumb组件的核心区分 #

• Smart组件：聚焦业务逻辑，依赖服务、管理状态、处理数据请求/后端交互，属于容器型组件。
• Dumb组件：仅负责UI渲染和基础交互，通过@Input接收数据、@Output触发事件，不依赖业务服务，行为完全由外部控制。

你的ConfirmBoxComponent属于Dumb组件 #

从代码实现来看，它完全符合Dumb组件的特征：

• 仅通过MAT_DIALOG_DATA接收外部传入的配置数据，作用等同于@Input；
• confirm/cancel方法仅负责关闭弹窗并返回交互结果（应通过dialogRef.close()传递确认状态），不处理具体业务逻辑（比如不直接调用API、不修改全局状态）；
• 未注入业务相关服务，仅依赖Angular Material的弹窗基础依赖。

模块放置方案 #

1. 将ConfirmBoxComponent放到Dumb Component Module中
   在Dumb模块内完成以下配置：

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { MatDialogModule } from '@angular/material/dialog';
   import { ConfirmBoxComponent } from './confirm-box.component';
   
   @NgModule({
     declarations: [ConfirmBoxComponent],
     // Angular 9+ 开启Ivy后无需显式声明entryComponents，老版本需添加该行
     // entryComponents: [ConfirmBoxComponent],
     exports: [ConfirmBoxComponent],
     imports: [CommonModule, MatDialogModule]
   })
   export class DumbComponentsModule { }
   

2. Smart Component Module只需导入Dumb模块
   无需在Smart模块的entryComponents中声明该组件，直接导入Dumb模块即可调用：

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { SmartComponent } from './smart.component';
   import { DumbComponentsModule } from '../dumb-components/dumb-components.module';
   import { MatDialogModule } from '@angular/material/dialog';
   
   @NgModule({
     declarations: [SmartComponent],
     imports: [CommonModule, DumbComponentsModule, MatDialogModule]
   })
   export class SmartComponentsModule { }
   

补充说明 #

• Angular 9及以上版本使用Ivy编译器时，动态创建的组件（如弹窗组件）无需手动添加到entryComponents，编译器会自动识别；
• 若后续ConfirmBoxComponent需要处理业务逻辑（比如调用服务），再考虑将其调整为Smart组件，但当前实现完全适合作为Dumb组件维护。

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