Angular中EventEmitter触发空字符串返回对象的问题咨询

核心原因 #

你观察到的{name: "textChange", args: ""}本质是EventEmitter实例本身的结构，出现这种差异有两种常见场景：

场景1：子组件emit的实际值不是空字符串 #

你给FormControl添加了Validators.required验证器，部分Angular版本中，当控件验证不通过（为空）时，valueChanges推送的值会是null而非空字符串，你的filter判断text.length == 0遇到null会隐式报错，导致后续逻辑异常，最终没有正确覆盖变量，输出了EventEmitter实例本身。

场景2：父组件取值逻辑错误 #

你没有通过事件回调正确获取emit的参数，而是直接访问了子组件的textChange属性：

• 要么是通过@ViewChild直接读取子组件实例的textChange属性，拿到的本身就是EventEmitter实例
• 要么是父组件监听事件时没有传入$event参数，错误写法示例：

<!-- 错误写法：没有传$event，拿不到emit的值 -->
<your-component (textChange)="handleChange()"></your-component>

修复步骤 #

1. 先确认子组件emit的值是否符合预期，添加日志校验并做兜底处理：

ngOnInit(): void {
  this.control.valueChanges
       .pipe(
           // 先做非空判断避免null报错
           filter(text => text != null && (text.length == 0 || text.length >= 2)),
           debounceTime(300),
           distinctUntilChanged()
       )
       .subscribe(text => {
         // 调试用，确认emit的值确实是空字符串
         console.log('emit内容', text, typeof text);
         this.textChange.emit(text ?? '');
       });
}

2. 改造FormControl配置，开启nonNullable保证无论验证状态如何，值永远为字符串类型，不会出现null：

public readonly control = new FormControl('', {
  nonNullable: true,
  disabled: this.disabled,
  validators: Validators.required
});

3. 修正父组件事件监听写法，必须传入$event才能拿到emit的参数：

<!-- 正确写法 -->
<your-component (textChange)="handleChange($event)"></your-component>

// 父组件接收逻辑
handleChange(text: string) {
  console.log('拿到的值', text); // 空输入时此处就会打印空字符串
}

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