Angular服务变量值无法更新：非关联组件间传对象失败

你遇到的核心问题是服务实例不共享——你在FirstComponent的providers数组里声明了SoruService，这会让Angular为每个组件单独创建一个服务实例。两个无关联组件拿到的根本不是同一个服务对象，所以你在第一个组件里更新服务变量，第二个组件完全感知不到。

下面是具体的修复步骤：

1. 让服务成为单例 #

首先修改你的SoruService，用providedIn: 'root'把它注册为根级单例服务，这样整个应用只会有一个服务实例：

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

@Injectable({
  providedIn: 'root' // 关键：注册为根级单例
})
export class SoruService {
  // 用BehaviorSubject保存可观察的数据，初始值可以是默认对象或null
  private _sharedSoru = new BehaviorSubject<SoruModel | null>(null);
  // 暴露一个只读的可观察对象给组件订阅
  sharedSoru$ = this._sharedSoru.asObservable();

  // 提供更新数据的方法
  updateSharedSoru(newSoru: SoruModel) {
    this._sharedSoru.next(newSoru); // 推送新数据，通知所有订阅者
  }
}

2. 移除组件级的服务声明 #

修改FirstComponent，删掉providers数组里的SoruService，确保组件使用的是根级的单例服务：

import { SoruService } from '../soru.service';
import { SoruModel, SecenekModel } from '../soruModel';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.scss'],
  // 删掉这行：providers: [SoruService]
})
export class FirstComponent implements OnInit {
  constructor(private soruService: SoruService) {}

  // 假设你在某个交互方法里更新数据
  onSoruUpdated(newSoru: SoruModel) {
    this.soruService.updateSharedSoru(newSoru);
  }
}

3. 在第二个组件订阅数据更新 #

在另一个组件（比如SecondComponent）里订阅服务的可观察对象，实时获取更新后的数据：

import { SoruService } from '../soru.service';
import { SoruModel } from '../soruModel';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-second',
  templateUrl: './second.component.html',
  styleUrls: ['./second.component.scss']
})
export class SecondComponent implements OnInit, OnDestroy {
  currentSoru: SoruModel | null = null;
  private dataSubscription!: Subscription;

  constructor(private soruService: SoruService) {}

  ngOnInit() {
    // 订阅服务的数据流，实时更新组件变量
    this.dataSubscription = this.soruService.sharedSoru$.subscribe(soru => {
      this.currentSoru = soru;
      // 这里可以添加你需要的视图更新逻辑
    });
  }

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

为什么要这样做？ #

• 单例服务保证了所有组件共享同一个数据源，更新操作会同步到所有使用该服务的组件。
• BehaviorSubject不仅能推送新数据，还会保存当前的最新值，新订阅的组件能立即拿到当前数据（如果用普通Subject，新订阅者只能收到订阅后的新数据）。
• 通过订阅可观察对象，组件能自动感知数据变化，Angular会帮你更新视图。

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