如何在Angular 2 / Typescript中声明全局变量?

我希望在Typescript语言的Angular 2中，一些变量可以在任何地方访问。我该怎么做呢?

401386 次浏览
小开

参见例子Angular 2——共享服务的实现

@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);
}
}
小开

共享服务是最好的方法

export class SharedService {
globalVar:string;
}

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

bootstrap(AppComponent, [SharedService]);

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

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

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

你可以看看这个关于依赖注入和层次注入器在Angular 2中如何工作的问题:

你应该注意到，你也可以在服务中定义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);
}
}

请看这个问题了解更多细节:

  • >委派:Angular中的EventEmitter或Observable
小开
最佳答案

下面是没有Service和Observer的最简单的解决方案:

将全局变量放在一个文件中并导出它们。

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


export const sep='/';
export const version: string="22.2.2";
要在另一个文件中使用全局变量，请使用import语句: import * as myGlobals from 'globals'; < / p >

例子:

//
// ===== 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 (**Updated**)


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

小开

我不知道最好的方法，但如果你想在组件内部定义一个全局变量，最简单的方法是使用window变量这样写:

window.GlobalVariable = "what ever!"

你不需要通过它来引导或将它导入到其他地方，而且它对所有JS(不仅仅是angular 2组件)都是全局可访问的。

小开

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

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


export const sep='/';
export const version: string="22.2.2";
小开
我也喜欢@supercobra的解决方案。 我只是想稍微改进一下。如果你导出一个包含所有常量的对象，你可以简单地使用es6 进口模块，而不使用需要。< / p >

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

// global.ts


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

使用import引用模块。

//anotherfile.ts that refers to global constants
import { GlobalVariable } from './path/global';


export class HeroService {
private baseApiUrl = GlobalVariable.BASE_API_URL;


//... more code
}
小开

这就是我使用它的方式:

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
}
< p >编辑:

.

.
小开

在app / globals.ts中创建全局类:

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服务提供程序添加到模块中，而不是组件中，并且你不需要作为提供程序添加到该模块中的每个组件中。

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

我认为最好的方法是在应用程序中通过导出和导入全局变量共享一个对象。

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

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

然后导入

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

并使用它

console.log(globalVariables);
小开

恕我直言，对于Angular2 (v2.2.3)来说，最好的方法是添加包含全局变量的服务，并将它们注入到没有@Component注释中的providers标记的组件中。通过这种方式，您可以在组件之间共享信息。

拥有是一个全局变量的示例服务:

import { Injectable } from '@angular/core'


@Injectable()
export class SomeSharedService {
public globalVar = '';
}

更新全局变量值的示例组件:

import { SomeSharedService } from '../services/index';


@Component({
templateUrl: '...'
})
export class UpdatingComponent {


constructor(private someSharedService: SomeSharedService) { }


updateValue() {
this.someSharedService.globalVar = 'updated value';
}
}

读取全局变量值的示例组件:

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实例。如果添加这一行，则会注入一个新创建的实例。


提交答案