Angular中@Output无法正常工作问题求助

我来帮你梳理下字符串输入值从子组件传递到父组件的常见问题点，结合你提供的子组件、父组件、module.ts的截图内容来分析：

子组件侧常见问题 #

• 未正确定义输出事件：要在子组件类中通过@Output()装饰器创建一个事件发射器，比如：

  import { Output, EventEmitter } from '@angular/core';
  
  @Output() onValueSubmit = new EventEmitter<string>();
  inputValue: string = '';
  
  submitValue() {
    this.onValueSubmit.emit(this.inputValue);
  }
  

  然后在按钮的点击事件里调用这个submitValue()方法，确保输入框的值能被正确发射出去。
• 输入框绑定失效：如果用了[(ngModel)]双向绑定输入值，要确保子组件类里声明了对应的变量（比如inputValue），同时module中已经导入FormsModule（这点和下面的module配置相关）。

父组件侧常见问题 #

• 未绑定子组件的输出事件：在父组件的模板中使用子组件时，需要绑定子组件定义的输出事件，比如：

  <app-child (onValueSubmit)="handleSubmittedValue($event)"></app-child>
  

  然后在父组件类中实现对应的处理方法：

  handleSubmittedValue(value: string) {
    console.log('从子组件拿到的值：', value);
    // 这里可以做后续的逻辑处理
  }
  

  如果没做这个绑定，父组件根本接收不到子组件发射的事件。

Module.ts配置问题 #

• 未导入FormsModule：如果子组件用了ngModel双向绑定，必须在对应的module的imports数组中添加FormsModule，否则输入框的值无法正确绑定到组件变量上：

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [
      // ...其他模块
      FormsModule
    ],
    declarations: [
      // ...确保子组件已经注册在这里
      ChildComponent
    ]
  })
  export class YourModule { }
  

• 子组件未注册：要确认子组件已经被添加到module的declarations数组中，否则父组件无法正常使用子组件。

你可以对照上面的点检查你的代码，应该能找到问题所在！

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