Angular 5可注入全局变量显示undefined问题求助

你已经把Globals服务注册到AppModule的providers里了，方向是对的，我来帮你梳理几个最可能导致问题的排查点：

1. 组件内是否正确完成了服务注入？ #

你贴的mycomponent.component.ts代码没写完，很大概率是注入环节出了问题。一定要通过构造函数依赖注入的方式使用服务，而不是自己手动实例化：

// mycomponent.component.ts 正确示例
import { Globals } from '../globals'; // 重点：路径要准确！

@Component({
  selector: 'app-mycomponent',
  templateUrl: './mycomponent.component.html'
})
export class MycomponentComponent {
  // 构造函数中声明要注入的Globals实例
  constructor(private globals: Globals) {
    // 在这里就能正常访问全局变量了
    console.log(this.globals.test); // 应该输出'user'
  }
}

如果是自己用new Globals()创建实例，不仅拿不到Angular注入的全局实例，还可能出现undefined的情况。

2. 检查导入路径是否正确 #

你写的import { Globals } from '../gl...看起来路径没写完，一定要确认路径是准确的。比如globals.ts在项目根目录，组件在src/app/components/mycomponent/下，那导入路径应该是import { Globals } from '../../globals';，路径错误会导致导入一个无效的模块，自然会出现undefined。

3. 避免组件内重复注册服务 #

如果你的组件@Component装饰器的providers数组里也加了Globals，会导致Angular为该组件创建一个全新的Globals实例，不仅达不到全局共享的目的，还可能出现值异常（包括undefined），所以要确保只有AppModule的providers里注册了Globals。

4. 排查循环依赖问题 #

如果Globals服务和你的组件之间存在循环依赖（比如Globals导入了组件相关的模块，组件又导入了Globals），也可能导致注入失败出现undefined。可以检查下globals.ts里有没有导入其他组件或和组件关联的服务。

先从构造函数注入和路径这两点排查，这是最常见的问题根源。

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