在Angular 2 / Typescript中声明一个全局variables的最好方法是什么？

我想在Typescript语言的Angular 2中的任何位置都可以使用variables。 什么是最好的做到这一点？

Answer 1

这里是最简单的解决scheme，没有Service也没有Observer ：

把全局variables放在一个文件中输出。

 // // ===== File globals.ts // 'use strict'; export const sep='/'; export const version: string="22.2.2"; 

要在另一个文件中使用全局variables，请使用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'; //<==== this one export class HeroesComponent implements OnInit { public heroes: Hero[]; public selectedHero: Hero; // // // Here we access the global var reference. // public helloString: string="hello " + myGlobals.sep + " there"; ... } } 

谢谢@ eric-martinez

Answer 2

我也喜欢@supercobra的解决scheme。 我只是想稍微改进它。 如果你导出一个包含所有常量的对象，你可以简单地使用es6 导入模块而不使用require 。

我也使用Object.freeze使属性成为真正的常量。 如果你对这个话题感兴趣，你可以阅读这篇文章 。

 // global.ts export const GlobalVariable = Object.freeze({ BASE_API_URL: 'http://example.com/', //... more of your variables }); 

使用导入来引用模块。

 //anotherfile.ts that refers to global constants import { GlobalVariable } from './path/global'; export class HeroService { private baseApiUrl = GlobalVariable.BASE_API_URL; //... more code } 

Answer 3

共享服务是最好的方法

 export class SharedService { globalVar:string; } 

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

 bootstrap(AppComponent, [SharedService]); 

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

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

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

你可以看看这个关于dependency injection和分层注入器如何在Angular2中工作的问题：

• 将angular色2（testing版）中的服务注入另一个服务的最佳方式是什么？

您可以注意到，您也可以在服务中定义Observable属性，以便在全局属性更改时通知应用程序的某些部分：

 export class SharedService { globalVar:string; globalVarUpdate:Observable<string>; globalVarObserver:Observer; constructor() { this.globalVarUpdate = Observable.create((observer:Observer) => { this.globalVarObserver = observer; }); } updateGlobalVar(newValue:string) { this.globalVar = newValue; this.globalVarObserver.next(this.globalVar); } } 

看到这个问题的更多细节：

• 代表团：Angular2中的EventEmitter或Observable

Answer 4

见例如Angular 2 – 实现共享服务

 @Injectable() 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); } } 

Answer 5

在app / globals.ts中创buildGlobals类：

 import { Injectable } from '@angular/core'; Injectable() export class Globals{ VAR1 = 'value1'; VAR2 = 'value2'; } 

在你的组件中：

 import { Globals } from './globals'; @Component({ selector: 'my-app', providers: [ Globals ], template: `<h1>My Component {{globals.VAR1}}<h1/>` }) export class AppComponent { constructor(private globals: Globals){ } } 

注意 ：您可以将Globals服务提供者直接添加到模块而不是该组件，并且不需要将该Globals服务提供者作为提供者添加到该模块中的每个组件。

 @NgModule({ imports: [...], declarations: [...], providers: [ Globals ], bootstrap: [ AppComponent ] }) export class AppModule { } 

Answer 6

恕我直言Angular2（v2.2.3）最好的方法是添加包含全局variables的服务，并将其注入到组件注释中没有providers标签的组件中。 通过这种方式，您可以在组件之间共享信息。

拥有全局variables的示例服务：

 import { Injectable } from '@angular/core' @Injectable() export class SomeSharedService { public globalVar = ''; } 

更新您的全局variables值的示例组件：

 import { SomeSharedService } from '../services/index'; @Component({ templateUrl: '...' }) export class UpdatingComponent { constructor(private someSharedService: SomeSharedService) { } updateValue() { this.someSharedService.globalVar = 'updated value'; } } 

读取您的全局variables值的示例组件：

 import { SomeSharedService } from '../services/index'; @Component({ templateUrl: '...' }) export class ReadingComponent { constructor(private someSharedService: SomeSharedService) { } readValue() { let valueReadOut = this.someSharedService.globalVar; // do something with the value read out } } 

请注意， providers: [ SomeSharedService ] 不应该添加到您的@Component注释中。 通过不添加此行注入将始终给你SomeSharedService相同的实例。 如果你添加一个新创build的实例注入。

Answer 7

我不知道最好的方法，但是如果你想在一个组件中定义一个全局variables，最简单的方法就是使用windowvariables来这样写：

window.GlobalVariable = "what ever!"

你不需要将它传递给bootstrap或者在其他地方导入它，并且全局地访问所有JS（不仅是angular度2的组件）。

Answer 8

我认为最好的办法是在整个应用程序中通过导出和导入它在你想要的位置共享一个包含全局variables的对象。

首先创build一个新的.ts文件，例如globals.ts并声明一个对象。 我给了它一个对象types，但你也可以使用任何types或{}

 export let globalVariables: Object = { version: '1.3.3.7', author: '0x1ad2', everything: 42 }; 

之后导入它

 import {globalVariables} from "path/to/your/globals.ts" 

并使用它

 console.log(globalVariables); 

Answer 9

我喜欢@supercobra的答案，但我会使用const关键字，因为它已经在ES6中可用了：

 // // ===== File globals.ts // 'use strict'; export const sep='/'; export const version: string="22.2.2"; 

Answer 10

这就是我使用它的方式：

global.ts

  export var server: string = 'http://localhost:4200/'; export var var2 : number = 2; export var var3 : string = 'var3'; 

使用它只是像这样的导入：

  import {Injectable} from "@angular/core"; import {Http, Headers, RequestOptions} from "@angular/http"; import {Observable} from "rxjs/Rx"; import * as glob from "../shared/global"; //<== HERE @Injectable() export class AuthService { private AuhtorizationServer = glob.server } 

编辑：按build议前缀“_”。