如何使用Angular Service向组件传递计数值？解决计数不更新问题

你的代码存在两个核心问题，导致计数器无法正确递增：

1. 组件内的coin变量始终为0，调用setCount(this.coin)相当于给Service传递0，所以Service中的计数值不会发生变化。
2. 你打印的是组件自身的coin变量，而非Service中维护的计数值，且调用getCount()后未处理返回结果。

修复后的代码示例 #

1. 优化CoinService（保持封装性，不暴露public变量） #

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root'})
export class CoinService {  
  private coin = 0; // 改为私有变量，避免外部直接修改

  setCount(coinValue: number): void {
    this.coin += coinValue;
  }

  getCount(): number {
    return this.coin;
  }

  // 新增专门的递增方法，更贴合业务语义
  incrementCount(step: number = 1): void {
    this.coin += step;
  }
}

2. 修正OneComponent的addTask方法 #

import { Component, OnInit } from '@angular/core';
import { CoinService } from './coin.service'; // 确保导入路径正确

@Component({
  selector: 'app-one',
  templateUrl: './one.component.html',
  styleUrls: ['./one.component.css']
})
export class OneComponent implements OnInit {  
  currentCoinCount: number = 0; // 用于展示Service中的计数值

  constructor(private coinService: CoinService) {}

  ngOnInit(): void {
    // 初始化时同步Service的计数值
    this.currentCoinCount = this.coinService.getCount();
  }

  addTask(): void {
    // 方式1：调用递增方法，默认每次加1（可传参自定义增量）
    this.coinService.incrementCount();
    
    // 方式2：如果需要自定义固定增量，比如每次加5，用setCount
    // this.coinService.setCount(5);

    // 获取Service中的最新计数值并更新组件变量
    this.currentCoinCount = this.coinService.getCount();
    console.log('coin:', this.currentCoinCount);
  }
}

关键修复点说明 #

• 不要依赖组件内的初始变量传递增量，直接传递需要递增的数值（比如1），或使用Service封装的递增方法更清晰。
• 组件必须通过getCount()获取Service中的最新计数值，才能同步显示或打印正确结果。
• 将Service中的coin改为私有变量，符合封装原则，避免外部代码直接修改内部状态。

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