如何在 Angular 2 / Typescript 中声明全局变量？ [关闭]

Question

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

Answer 1

共享服务是最好的方法

export class SharedService {
  globalVar:string;
}

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

bootstrap(AppComponent, [SharedService]);

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

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

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

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

• What's the best way to inject one service into another in angular 2 (Beta)?

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

查看这个问题了解更多详情：

• Delegation: EventEmitter or Observable in Angular

Answer 2

这是最简单的解决方案，没有Service 也没有Observer：

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

//
// ===== 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'; //<==== 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

Answer 3

我就是这么用的：

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
}

编辑： 按照建议删除了前缀“_”。

Answer 4

参见例如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);
  }
}

Answer 5

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

我还使用 Object.freeze 使属性成为真正的常量。如果您对该主题感兴趣，可以阅读此post。

// 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
}

Answer 6

恕我直言，对于 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 的相同实例。如果您添加该行，则会注入一个新创建的实例。

Answer 7

我认为最好的方法是在整个应用程序中通过将对象导出和导入到所需的位置来共享具有全局变量的对象。

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

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 8

在 app/globals.ts 中创建 Globals 类：

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 {
}

Answer 9

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

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

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

Answer 10

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

window.GlobalVariable = "what ever!"

您不需要将它传递给引导程序或将其导入其他地方，并且它对所有 JS（不仅是 Angular 2 组件）全局可访问。