Angular：共享服务中变量Z递增后为何未同步到独立组件？

核心原因 #

1. 共享服务未保持单例 #

如果组件在自身的providers数组中声明了共享服务，会导致每个组件创建独立的服务实例。此时修改的是当前组件所属实例的变量，其他组件的服务实例变量不会变化。

2. 普通变量不具备响应式更新能力 #

Angular的变更检测不会追踪普通原始类型变量（如number）的赋值变化。当你直接修改服务中的z变量时，组件无法感知到变化，视图也不会自动更新。

解决方案 #

步骤1：确保服务为单例模式 #

在服务类的@Injectable装饰器中设置providedIn: 'root'，让Angular在根注入器中提供单例服务，避免多实例问题：

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

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  // 用BehaviorSubject包装变量，初始值设为0
  private zSubject = new BehaviorSubject<number>(0);
  // 暴露可观察对象供组件订阅，避免外部直接修改Subject
  z$ = this.zSubject.asObservable();

  incrementZ() {
    const currentValue = this.zSubject.value;
    this.zSubject.next(currentValue + 1);
  }
}

步骤2：组件订阅响应式变量 #

在组件中订阅服务暴露的z$可观察对象，获取最新值并更新视图：

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

@Component({
  selector: 'app-any-component',
  template: `<p>当前Z值：{{ currentZ }}</p>`
})
export class AnyComponent implements OnInit, OnDestroy {
  currentZ: number = 0;
  private zSubscription!: Subscription;

  constructor(private sharedService: SharedService) {}

  ngOnInit() {
    // 订阅变量变化，更新视图
    this.zSubscription = this.sharedService.z$.subscribe(value => {
      this.currentZ = value;
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    this.zSubscription.unsubscribe();
  }
}

步骤3：调用服务方法修改变量 #

所有对z的修改都通过服务的方法（如incrementZ()）完成，确保变量变更能通过BehaviorSubject通知所有订阅组件。

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