Angular子组件在valueChanges内emit事件仅生效一次问题求助

核心结论 #

Angular完全支持在valueChanges这类Observable的订阅回调中通过EventEmitter向父组件发送事件，你的问题并非机制本身限制，而是代码或组件生命周期的潜在问题。

可能的问题点及解决方案 #

1. 父组件事件绑定错误 #

检查父组件模板中是否正确绑定了子组件的formChanged输出事件，确保事件名与子组件@Output的别名完全一致：

<!-- 父组件模板正确绑定示例 -->
<app-child-component (formChanged)="handleFormChanged($event)"></app-child-component>

2. 订阅未清理引发异常 #

若父组件通过*ngIf等逻辑控制子组件的销毁重建，未取消订阅的旧valueChanges订阅可能导致异常。建议在组件销毁时清理订阅：

import { Subscription } from 'rxjs';

// 子组件代码
private valueChangesSub!: Subscription;

ngOnInit() {
  this.valueChangesSub = this.currencyConversionForm.valueChanges.subscribe((selectedValue: any) => {
    console.log('form value changed');
    console.log(selectedValue);
    this.formEmitter.emit(selectedValue);
  });
}

ngOnDestroy() {
  this.valueChangesSub?.unsubscribe();
}

3. 父组件处理函数存在语法错误 #

你的handleFormChanged方法中有明显笔误：his.amount应为this.amount，该错误会导致函数执行中断，控制台会抛出ReferenceError，修正后：

handleFormChanged(value: any) {
   console.log(value);
   this.amount = value.amount; // 修正his为this
   this.baseCurrency = value.baseCurrencyForm;
   this.counterCurrency = value.counterCurrencyForm;
}

4. 表单值未发生实际变化 #

valueChanges仅在表单控件值实际改变时触发，若后续操作重复设置相同值，订阅回调不会执行。可通过控制台的selectedValue日志，确认每次操作后值确实有变更。

快速验证步骤 #

1. 打开浏览器控制台，检查是否有语法报错（比如上述his笔误的错误信息）；
2. 确认子组件的console.log('form value changed')每次操作都能打印，判断valueChanges订阅是否正常触发；
3. 若订阅正常但父组件未收到事件，检查父组件事件绑定是否正确，以及子组件是否被意外销毁重建。

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