Angular服务get函数跨组件调用：硬币计数器值无法同步

你当前的核心问题是：服务中的coin是普通数字类型，two组件仅在ngOnInit生命周期钩子中获取了一次初始值，后续服务内coin更新时，two组件无法感知到数据变化，因此页面显示始终停留在初始值。Angular的变更检测需要组件能收到数据更新的通知，普通值类型无法实现这种实时同步，必须借助**可观察对象（Observable）**来完成。

使用RxJS的BehaviorSubject来存储硬币计数，它既能保存当前最新值，也能在值变更时主动通知所有订阅的组件。以下是修改后的完整代码：

1. 修改CoinService #

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

@Injectable({
  providedIn: 'root',
})
export class CoinService {
  // 用BehaviorSubject保存计数，初始值设为0
  private coinSubject = new BehaviorSubject<number>(0);
  // 对外暴露只读的可观察流，避免组件直接修改内部值
  public coin$ = this.coinSubject.asObservable();

  setCount() {
    const currentValue = this.coinSubject.value;
    this.coinSubject.next(currentValue + 10);
  }

  getCount(): number {
    return this.coinSubject.value;
  }

  decrementCount() {
    const currentValue = this.coinSubject.value;
    this.coinSubject.next(currentValue - 10);
  }
}

2. 修改OneComponent（无需大幅改动） #

coin: number = 0;

constructor(private coinservice: CoinService) {}

addTask() {
  if (this.onAddItem) {
    this.coinservice.setCount();
    console.log('coin:', this.coinservice.getCount());
  }
}

3. 修改TwoComponent（两种实现方式） #

方式一：手动订阅（需管理订阅销毁） #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CoinService } from '../coin.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-two',
  templateUrl: './two.component.html',
  styleUrls: ['./two.component.css']
})
export class TwoComponent implements OnInit, OnDestroy {
  public coom: number = 0;
  private coinSubscription!: Subscription;

  constructor(private coinservice: CoinService) { }

  ngOnInit(): void {
    // 订阅计数流，实时更新组件内的coom值
    this.coinSubscription = this.coinservice.coin$.subscribe(coinValue => {
      this.coom = coinValue;
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，防止内存泄漏
    this.coinSubscription.unsubscribe();
  }
}

对应的模板（无需修改）：

<img class="coinCount" src="assets/images/coin.png" width="10px" height="10px"> {{coom}}

方式二：使用async管道（更简洁，自动管理订阅） #

import { Component, OnInit } from '@angular/core';
import { CoinService } from '../coin.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-two',
  templateUrl: './two.component.html',
  styleUrls: ['./two.component.css']
})
export class TwoComponent implements OnInit {
  public coin$!: Observable<number>;

  constructor(private coinservice: CoinService) { }

  ngOnInit(): void {
    this.coin$ = this.coinservice.coin$;
  }
}

对应的模板修改为：

<img class="coinCount" src="assets/images/coin.png" width="10px" height="10px"> {{ coin$ | async }}

BehaviorSubject是RxJS的特殊可观察对象，它会始终保留当前的最新值：

• 组件订阅时会立即收到当前值
• 每次调用next()发射新值时，所有订阅的组件都会同步收到更新
• Angular的变更检测会自动识别数据变化，更新页面显示

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