Angular组件构造函数注入错误求助：实现count变量用户可调整

你的问题出在错误地用构造函数参数接收外部传入的count值——Angular中构造函数的参数默认会被当作依赖注入的服务类型，而number并不是一个可注入的服务，所以会抛出找不到提供商的错误。要实现让count可被外部调整，应该使用Angular的@Input()装饰器定义输入属性，这是组件间传递数据的标准方式。

修改后的正确代码： #

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

@Component({
  selector: 'app-likebtn',
  templateUrl: './likebtn.component.html',
  styleUrls: ['./likebtn.component.css']
})
export class LikebtnComponent {
  selected: boolean = false;
  // 用@Input()标记为输入属性，允许父组件传入值，同时设置默认值0
  @Input() count: number = 0;

  handleClick() {
    this.selected = !this.selected;
    // 简化计数逻辑
    this.count += this.selected ? 1 : -1;
  }
}

父组件中使用该组件的方式： #

在父组件模板里，通过属性绑定传递初始count值：

<!-- 直接传固定数值 -->
<app-likebtn [count]="5"></app-likebtn>

<!-- 绑定父组件的变量 -->
<app-likebtn [count]="parentComponentCount"></app-likebtn>

额外补充：监听count变化（可选） #

如果需要在外部传入的count值发生变化时执行额外逻辑（比如重置选中状态），可以实现OnChanges生命周期钩子：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-likebtn',
  templateUrl: './likebtn.component.html',
  styleUrls: ['./likebtn.component.css']
})
export class LikebtnComponent implements OnChanges {
  selected: boolean = false;
  @Input() count: number = 0;

  ngOnChanges(changes: SimpleChanges) {
    // 检测count属性的变化
    if (changes['count']) {
      this.selected = false;
    }
  }

  handleClick() {
    this.selected = !this.selected;
    this.count += this.selected ? 1 : -1;
  }
}

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