Angular 15 单例服务多次实例化导致组件间数据共享异常问题咨询

看起来你遇到了Angular单例服务意外多次实例化的典型问题——这直接导致Comp1设置的用户名在Comp2里拿不到，因为两个组件用的根本不是同一个服务实例！我来帮你排查可能的原因，以及对应的解决办法：

一、排查服务多实例的核心原因 #

你已经给SampleService加上了providedIn: 'root'，这是Angular推荐的单例服务声明方式，但如果出现以下情况，还是会打破单例：

• 重复在组件/模块的providers数组中声明服务
  虽然你贴出的代码里Comp1、Comp2和AppModule的providers都是空数组，但一定要检查有没有其他地方（比如父组件、未贴出的其他模块）把SampleService加到了providers里。只要在任何组件或模块的providers里再次声明这个服务，Angular就会为该组件/模块创建新的服务实例。

• 导入路径不一致导致加载了不同的服务文件
  检查Comp1和Comp2里导入SampleService的路径是否完全一致（比如都是../services/sample.service）。如果路径写错（比如一个用../services/sample.service，另一个用./services/sample.service），可能会意外导入不同的文件，导致多个实例。

• 懒加载模块的额外声明
  如果Comp1或Comp2所在的模块是懒加载的，并且该模块的providers里声明了SampleService，Angular会为懒加载模块单独创建服务实例。从你的AppModule代码来看，这两个组件都在根模块的declarations里，应该不是懒加载的情况，但还是建议确认下路由配置里有没有懒加载设置。

二、快速验证实例数量的小技巧 #

你可以给服务加个静态计数属性，直观确认是否真的创建了多个实例：

import { Injectable } from "@angular/core";

@Injectable({
  providedIn: 'root'
})
export class SampleService {
  static instanceCount = 0; // 新增静态计数属性
  userName!: string;

  constructor(){
    SampleService.instanceCount++;
    console.log(`SampleService实例创建！当前实例数：${SampleService.instanceCount}`);
  }

  updateUserInfo(userName: string){
    this.userName = userName;
  }

  getUserName(){
    return this.userName;
  }
}

如果控制台打印的数字大于1，就说明确实是多实例问题。

三、优化数据共享的建议 #

即使解决了单例问题，直接用字符串存储共享数据也有局限性（比如Comp2如果在Comp1之后加载，可能拿不到最新值）。推荐用RxJS的BehaviorSubject实现响应式数据共享，让组件能实时获取最新值：

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

@Injectable({
  providedIn: 'root'
})
export class SampleService {
  private userNameSubject = new BehaviorSubject<string>('');
  public userName$ = this.userNameSubject.asObservable(); // 暴露可观察对象给组件

  constructor(){
    console.log('SampleService Object created!')
  }

  updateUserInfo(userName: string){
    this.userNameSubject.next(userName); // 更新数据
  }

  getUserName(){
    return this.userNameSubject.value; // 获取当前值
  }
}

然后在Comp2里订阅数据变化：

ngOnInit(): void {
  // 实时获取最新用户名
  this.sampleService.userName$.subscribe(userName => {
    console.log('User Name is - '+userName);
  });
}

总结 #

先重点排查有没有重复声明服务的情况，确保SampleService只通过providedIn: 'root'声明，不要在任何组件或模块的providers里再加它。解决单例问题后，数据共享的问题自然就解决了，配合RxJS的方式能让数据共享更可靠。

备注：内容来源于stack exchange，提问作者Sunil D