Angular 5全局服务取值为undefined问题求助

嘿，你猜的完全没错——问题核心就是你的GlobalService被多次实例化了，导致设置值的组件和获取值的组件拿到的根本不是同一个服务实例，自然获取不到之前设置的内容。下面给你拆解原因和解决办法：

问题根源 #

Angular的服务注入是分层级的：如果在多个@NgModule的providers数组里都声明了GlobalService，每个模块（尤其是懒加载模块）都会创建一个独立的服务实例。你设置值的组件用的是A实例，获取值的组件用的是B实例，当然拿不到数据。

解决方案（两种方式任选其一） #

方式1：用providedIn: 'root'实现单例（Angular 5+推荐） #

直接在服务的@Injectable装饰器里配置providedIn: 'root'，Angular会自动将它注册为根注入器的单例服务，不用再在任何模块的providers里声明：

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root' // 关键配置：确保服务全局唯一实例
})
export class GlobalService{
  private currency;
  constructor() { 
    // 可以加一行日志验证实例是否唯一
    console.log('GlobalService 实例已创建');
  }
  setCurrency(val) {
    this.currency = val;
  }
  getCurrency() {
    return this.currency;
  }
}

然后把所有模块（包括你之前的全局服务模块）的providers数组里的GlobalService删掉，避免重复注册。

方式2：仅在根模块声明服务 #

如果习惯用模块配置的方式，**只在根模块（AppModule）**的providers里添加GlobalService，其他所有模块（包括懒加载模块）都不要在providers里声明它：

// AppModule.ts
@NgModule({
  ...,
  providers:[ GlobalService ] // 只在这里注册一次
})
export class AppModule { }

这样整个应用只会创建一个GlobalService实例，所有组件注入的都是同一个对象。

验证方法 #

你可以在GlobalService的构造函数里加一行日志，比如上面的console.log('GlobalService 实例已创建');。如果控制台只输出一次，说明是单例；如果输出多次，就说明你还有其他模块在重复注册这个服务，找到并删除多余的配置即可。

调整之后，再测试组件的getCurrency()，应该就能拿到正确的值了。

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