Angular 5中模态框关闭后更新父组件视图的方案及性能对比

嘿，针对你在Angular 5里遇到的子模态框关闭后更新父组件属性的问题，我来帮你拆解下这三个方法的可行性和性能表现：

选项a：单例Service中的Subject() #

• 是否可行：完全没问题！这是Angular里处理跨组件通信（尤其是没有直接父子关系的组件）的经典方案。
• 具体实现：在单例Service里定义一个Subject，模态对话框关闭时调用subject.next()发送事件；父组件在初始化阶段订阅这个Subject，一旦收到事件就触发属性更新逻辑。
• 开销情况：整体开销很低，Subject本身是RxJS轻量级的发布订阅容器，单例Service不会产生多余实例，订阅和发送事件的操作都是低消耗的（基础Subject是同步执行的，性能表现很好）。不过它更适合复杂的跨组件场景，比如多个无关组件需要监听同一个事件的情况。

选项b：使用EventEmitter #

• 是否可行：必须可行！而且这才是父子组件通信的标准最优解，特别适合模态框这种明确的父子组件关系场景。
• 具体实现：在模态子组件里定义@Output() modalClosed = new EventEmitter<void>()，关闭模态框时调用this.modalClosed.emit()；父组件在模板里通过(modalClosed)="updateParentProperty()"绑定事件，直接触发属性更新。
• 开销情况：这是三个选项里速度最快、开销最小的！EventEmitter是Angular基于RxJS Subject封装的原生输出事件工具，没有额外的中间层依赖，事件传递是组件间直接绑定的，执行效率拉满，完全贴合父子组件的通信场景。

选项c：生命周期钩子 #

• 是否可行：这个方案并不适合你的需求，也没有合适的生命周期钩子能直接实现这个功能。
• 原因：ngOnChanges()只能监听当前组件的输入属性变化，ngDoCheck()是用来手动执行变更检测的，它们都没法直接感知子组件的关闭动作。如果硬要靠钩子实现，你可能得让父组件一直轮询子组件的状态，这会带来不必要的性能消耗，完全没必要这么做。

1. 可行性：选项a和b都能实现需求，选项c不适合这个场景；
2. 性能优先级：选项b（EventEmitter）> 选项a（单例Subject）> 选项c（生命周期钩子）。如果只是单纯的父子模态框通信，选EventEmitter就对了，简单高效开销小；如果是更复杂的跨组件通信场景，再考虑用单例Service的Subject方案。

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