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

嘿，刚上手Angular 2的时候搞不定@Input和@Output真的超闹心！结合你说的父组件（员工表格）和子组件（单选按钮）的场景，我帮你梳理几个最容易踩的坑，还有正确的实现方式👇

首先得确保子组件（emp.count.component.ts）里正确导入了所需的装饰器，并且按规则定义输入输出属性：

// emp.count.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-emp-count',
  templateUrl: './emp.count.component.html'
})
export class EmpCountComponent {
  // 接收父组件传递的选中状态
  @Input() selectedEmployeeRadio: string; 
  // 向父组件发射单选按钮的选中事件
  @Output() radioSelected = new EventEmitter<string>();

  // 单选按钮切换时触发的方法
  onRadioChange(selection: string) {
    this.radioSelected.emit(selection);
  }
}

在父组件的模板（emp.table.html）里，要给子组件正确绑定输入属性，同时监听输出事件：

<!-- emp.table.html -->
<!-- 绑定@Input：把父组件的selectedEmployeeRadio传给子组件 -->
<!-- 监听@Output：子组件发射radioSelected事件时，调用父组件的处理方法 -->
<app-emp-count 
  [selectedEmployeeRadio]="selectedEmployeeRadio"
  (radioSelected)="onRadioSelected($event)"
></app-emp-count>

<!-- 员工表格区域 -->
<table>
  <!-- 你的表格内容 -->
</table>

父组件（emp.table.ts）里需要声明存储选中状态的属性，以及处理子组件事件的方法：

// emp.table.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-emp-table',
  templateUrl: './emp.table.html'
})
export class EmpTableComponent {
  selectedEmployeeRadio: string = ''; // 存储单选按钮的选中值

  // 处理子组件传来的单选事件
  onRadioSelected(selection: string) {
    this.selectedEmployeeRadio = selection;
    // 这里可以根据选中值做表格过滤等操作
    console.log('选中的员工类型：', selection);
  }
}

• 组件声明问题：确保子组件已经在你的Angular模块的declarations数组里注册了，不然父组件识别不了它
• 拼写一致性：子组件的selector（比如app-emp-count）要和父组件模板里用的完全一致；@Input/@Output的属性名在模板绑定时也要和子组件定义的一致（驼峰命名在模板里可以用短横线分隔，比如selected-employee-radio，但要统一）
• 事件绑定格式：@Output的事件要加括号，比如(radioSelected)，子组件里的EventEmitter要正确调用emit()传递值

如果你的子组件模板是单选按钮组，大概可以这么写：

<!-- emp.count.component.html -->
<div class="radio-group">
  <label>
    <input 
      type="radio" 
      value="fulltime" 
      [checked]="selectedEmployeeRadio === 'fulltime'"
      (change)="onRadioChange('fulltime')"
    >
    全职员工
  </label>
  <label>
    <input 
      type="radio" 
      value="parttime" 
      [checked]="selectedEmployeeRadio === 'parttime'"
      (change)="onRadioChange('parttime')"
    >
    兼职员工
  </label>
</div>

按照这个流程走下来，@Input和@Output应该就能正常工作啦！如果还是有问题，可以看看浏览器控制台有没有报错，比如属性未定义、组件未注册这类提示，都是新手常踩的小坑~

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