如何在Angular Service中保存组件数据？骰子游戏场景实现

1. 创建共享数据Service #

先做一个全局单例Service来存储骰子结果，确保页面跳转后数据不会丢失：

// dice-result.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root' // 根模块提供，保证全局唯一实例
})
export class DiceResultService {
  // 用BehaviorSubject存储结果，初始值为空数组
  private diceResultsSubject = new BehaviorSubject<number[]>([]);
  // 暴露可观察对象，供组件订阅获取数据
  diceResults$ = this.diceResultsSubject.asObservable();

  // 更新骰子结果
  setDiceResults(results: number[]) {
    this.diceResultsSubject.next(results);
  }

  // 获取当前最新结果（可选，也可以直接通过订阅$获取）
  getCurrentResults(): number[] {
    return this.diceResultsSubject.value;
  }
}

2. 修改骰子组件代码 #

在组件里注入Service，替换原有的本地数组，把数据读写逻辑转移到Service：

// dice-game.component.ts
import { Component, OnInit } from '@angular/core';
import { DiceResultService } from './dice-result.service';

@Component({
  selector: 'app-dice-game',
  templateUrl: './dice-game.component.html',
  styleUrls: ['./dice-game.component.css']
})
export class DiceGameComponent implements OnInit {
  // 不再用本地数组，改为订阅Service的可观察对象
  diceResults$ = this.diceResultService.diceResults$;

  constructor(private diceResultService: DiceResultService) {}

  ngOnInit(): void {
    // 组件初始化时自动从Service读取之前的结果
  }

  rollTheDice() {
    const newResults: number[] = [];
    for (let i in this.diceGame) {
      for (let a = 0; a < this.diceGame[i].numberOfDices; a++) {
        // 修正原代码：用Math.floor确保结果是整数
        newResults.push(Math.floor(Math.random() * (this.diceGame[i].numberOfFaces - 1) + 1));
      }
    }
    // 把新结果存入Service
    this.diceResultService.setDiceResults(newResults);
  }
}

3. 更新HTML模板 #

用async管道自动处理订阅，直接渲染Service里的结果：

<button *ngFor="let dice of diceResults$ | async" class="btn btn-large bg-warning m-1">
  {{ dice | number: '1.0-0' }}
</button>

核心逻辑说明 #

• Service通过providedIn: 'root'成为全局单例，页面跳转时不会被销毁，数据能一直保留。
• BehaviorSubject既支持组件实时响应数据变化，也能直接获取当前最新值，适配不同场景。
• async管道自动管理订阅生命周期，避免手动订阅导致的内存泄漏问题。

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