如何在Angular 2 / Typescript中声明一个全局变量？

我想让一些变量在 "Angular 2 "的 "Typescript "语言中随处可得。我应该如何完成这个任务？

Jeff
已编辑的问题 12日 五月 2019 в 1:01
编程
angular typescript
22日 三月 2016 в 3:40
30 种观点
解决办法

这里是最简单的解决方案，既没有 "服务 "也没有 "观察者"。

把全局变量放在一个文件中，然后导出。

//
// ===== File globals.ts    
//
'use strict';

export const sep='/';
export const version: string="22.2.2";

要在其他文件中使用全局变量，请使用 "import "语句。 ``import * as myGlobals from './globals';````。

例子。


// 
// ===== File heroes.component.ts    
//
import {Component, OnInit} from 'angular2/core';
import {Router} from 'angular2/router';
import {HeroService} from './hero.service';
import {HeroDetailComponent} from './hero-detail.component';
import {Hero} from './hero';
import * as myGlobals from './globals'; //
snorkpete
编辑本段答案6日 五月 2017 в 5:13
评论(11)

共享服务是最好的方法

export class SharedService {
  globalVar:string;
}

但你在注册时需要非常小心，以便能够为你的整个应用程序共享一个实例。你需要在注册你的应用程序时定义它。

bootstrap(AppComponent, [SharedService]);

但不要在你的组件的providers属性中再次定义它。

@Component({
  (...)
  providers: [ SharedService ], // No
  (...)
})

否则，将为该组件及其子组件创建一个新的服务实例。

你可以看看这个关于Angular2中依赖注入和分层注入器如何工作的问题。

你可以注意到，你也可以在服务中定义Observable属性，当你的全局属性发生变化时，通知你的应用程序的一部分。

export class SharedService {
  globalVar:string;
  globalVarUpdate:Observable;
  globalVarObserver:Observer;

  constructor() {
    this.globalVarUpdate = Observable.create((observer:Observer) => {
      this.globalVarObserver = observer;
    });
  }

  updateGlobalVar(newValue:string) {
    this.globalVar = newValue;
    this.globalVarObserver.next(this.globalVar);
  }
}

更多细节请参见本问题。

Community
编辑本段答案23日 五月 2017 в 12:18
评论(5)

例如，见https://stackoverflow.com/questions/35993778/angular-2-implementation-of-shared-services

@Injectable() 
export class MyGlobals {
  readonly myConfigValue:string = 'abc';
}

@NgModule({
  providers: [MyGlobals],
  ...
})

class MyComponent {
  constructor(private myGlobals:MyGlobals) {
    console.log(myGlobals.myConfigValue);
  }
}

或提供个别数值

@NgModule({
  providers: [{provide: 'myConfigValue', useValue: 'abc'}],
  ...
})

class MyComponent {
  constructor(@Inject('myConfigValue') private myConfigValue:string) {
    console.log(myConfigValue);
  }
}
Demodave
编辑本段答案15日 二月 2018 в 2:46
评论(8)