Angular报错NG8002：无法绑定'setNumber'至app-game-control组件原因排查

核心问题 #

你犯了两个关键错误，直接导致Angular识别不了setNumber属性：

1. 绑定语法与装饰器不匹配
   子组件里把setNumber声明为@Output（用于子组件向父组件触发事件），但父组件却用了属性绑定语法[setNumber]——这种方括号绑定是给@Input（父组件向子组件传值）用的，Angular找不到对应的@Input属性，自然报NG8002错误。

2. @Output未初始化
   你只声明了@Output() setNumber;，但没有实例化EventEmitter，就算语法对了，这个输出属性也没法正常工作。

修复步骤 #

第一步：修正子组件的@Output初始化 #

在GameControlComponent里把setNumber正确初始化：

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-game-control',
  // ...其他组件元数据
})
export class GameControlComponent {
  // 实例化EventEmitter，泛型可根据你要传递的数据类型修改
  @Output() setNumber = new EventEmitter<number>();

  // 示例：触发事件的方法，比如按钮点击时调用
  triggerSetNumber() {
    this.setNumber.emit(123); // 传递你需要的数据
  }
}

第二步：修正父组件的绑定语法 #

把父组件模板里的[setNumber]改成事件绑定语法（圆括号），并绑定父组件的处理方法：

<!-- 父组件模板 -->
<app-game-control (setNumber)="onSetNumberReceived($event)"></app-game-control>

然后在父组件类里实现处理方法：

export class ParentComponent {
  onSetNumberReceived(number: number) {
    console.log('收到子组件传递的数字：', number);
    // 这里编写你的业务逻辑
  }
}

额外说明 #

如果你的需求本来是父组件给子组件传值，那应该把子组件里的@Output改成@Input，保持绑定语法和装饰器对应：

• 子组件：@Input() setNumber: number;
• 父组件模板：<app-game-control [setNumber]="yourNumberValue"></app-game-control>

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