Angular Service疑问：原始类型值为何无法正确更新？

在研究Angular Service工作机制时，发现添加虚拟英雄后，heroes数组能正常在页面渲染更新，但heroCounter数字类型值无法同步更新——控制台能打印出正确的计数器值，但页面显示始终不变。

相关代码示例 #

hero.services.ts

import { Injectable } from '@angular/core';
import { Hero } from '../model/hero.model';
import { HEROES } from '../constants/hero.constant';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class HeroService {
  heroes!: Hero[];
  heroesCounter!:number;

  constructor() {
    this.heroes = HEROES;
    this.heroesCounter = this.heroes.length;
  }

  getHeroes(): Observable<Hero[]> {
    return of(this.heroes);
  }

  getHeroesCounter(): Observable<number> {
    return of(this.heroesCounter);
  }

  mockAddHero(name: string): void {
    setTimeout(() => {
      this.heroes.push(new Hero(name));
      this.heroesCounter = this.heroes.length;
      console.log(this.heroesCounter);
    }, 1500);
  }
}

app.component.ts

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { HeroService } from '../services/hero.service';
import { Hero } from '../model/hero.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent implements OnInit {
  heroes!: Hero[];
  heroesCounter!: number;
  constructor(private heroService: HeroService) {}

  getHeroes(): void {
    this.heroService.getHeroes().subscribe((heroes) => (this.heroes = heroes));
  }

  getHeroesCounter(): void {
    this.heroService
      .getHeroesCounter()
      .subscribe((counter) => {this.heroesCounter = counter});
  }

  ngOnInit(): void {
    this.getHeroes();
    this.getHeroesCounter();
  }

  addHero(): void {
    this.heroService.mockAddHero('new hero');
  }
}

app.component.html

<div>
  <button (click)="addHero()" >Add Dummy Hero</button>
  <ul> 
    <!-- This works -->
    @for(hero of heroes; track $index){
      <li>{{hero.name}}</li>
    }
  </ul>
  <!-- This does not work -->
  <p> Total of heroes: {{this.heroesCounter}}</p>
</div>

原因分析 #

1. Observable的一次性发射特性：getHeroesCounter()方法中用of(this.heroesCounter)创建的Observable只会发射一次当前的计数器值，组件在ngOnInit中订阅后，后续Service里的heroesCounter发生变化时，不会再向组件推送新值，因此组件内的heroesCounter始终是初始订阅的数值。
2. 引用类型vs基本类型的差异：
   • heroes是数组（引用类型），组件订阅后拿到的是Service中数组的引用地址，当Service里执行push操作修改数组内容时，组件内的heroes引用指向的还是同一个数组，Angular的变更检测能检测到数组内容变化，因此@for循环会重新渲染列表。
   • heroesCounter是数字（基本类型），组件订阅时拿到的是值的副本，Service里的计数器更新后，组件的副本不会自动同步，且没有新的Observable推送通知，所以页面显示不变。

解决方案：用BehaviorSubject实现响应式状态 #

BehaviorSubject是RxJS的核心类型之一，它会保存当前最新值，新订阅者订阅时会立即收到当前值，后续值变化时也会主动推送更新。

修改后的hero.service.ts #

import { Injectable } from '@angular/core';
import { Hero } from '../model/hero.model';
import { HEROES } from '../constants/hero.constant';
import { Observable, BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class HeroService {
  heroes!: Hero[];
  // 用BehaviorSubject替代普通数字变量，初始值设为0
  private heroesCounterSubject = new BehaviorSubject<number>(0);
  // 对外暴露Observable，避免外部直接修改Subject
  heroesCounter$ = this.heroesCounterSubject.asObservable();

  constructor() {
    this.heroes = HEROES;
    // 初始化推送数组长度作为初始计数器值
    this.heroesCounterSubject.next(this.heroes.length);
  }

  getHeroes(): Observable<Hero[]> {
    return of(this.heroes);
    // 可选优化：数组也改用BehaviorSubject，实现全响应式
    // private heroesSubject = new BehaviorSubject<Hero[]>(HEROES);
    // heroes$ = this.heroesSubject.asObservable();
  }

  mockAddHero(name: string): void {
    setTimeout(() => {
      this.heroes.push(new Hero(name));
      // 推送新的计数器值
      this.heroesCounterSubject.next(this.heroes.length);
      console.log(this.heroesCounterSubject.value);
    }, 1500);
  }
}

修改app.component.ts #

import { Component, OnInit } from '@angular/core';
import { HeroService } from '../services/hero.service';
import { Hero } from '../model/hero.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent implements OnInit {
  heroes!: Hero[];
  heroesCounter!: number;
  constructor(private heroService: HeroService) {}

  getHeroes(): void {
    this.heroService.getHeroes().subscribe((heroes) => (this.heroes = heroes));
  }

  ngOnInit(): void {
    this.getHeroes();
    // 订阅BehaviorSubject的Observable，接收计数器更新
    this.heroService.heroesCounter$.subscribe((counter) => {
      this.heroesCounter = counter;
    });
  }

  addHero(): void {
    this.heroService.mockAddHero('new hero');
  }
}

可选优化：用AsyncPipe简化模板 #

可以省去组件内的heroesCounter变量，直接在模板中用AsyncPipe订阅Observable，自动处理订阅和取消订阅：

<div>
  <button (click)="addHero()">Add Dummy Hero</button>
  <ul> 
    @for(hero of heroes; track $index){
      <li>{{hero.name}}</li>
    }
  </ul>
  <!-- 使用AsyncPipe直接订阅Observable -->
  <p> Total of heroes: {{heroService.heroesCounter$ | async}}</p>
</div>

此时可删除app.component.ts中heroesCounter变量及对应的订阅逻辑，代码更简洁。

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