在Angular 2/Typescript中声明全局变量的最佳方法是什么

Question

我希望Angular 2在Typescript语言中随处可以访问一些变量.做这个的最好方式是什么？

Answer 1

这是最简单的解决方案,Service没有Observer:

将全局变量放在文件中导出它们.

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

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

要在另一个文件中使用globals,请使用以下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的解决方案.我只是想略微改进它.如果导出包含所有常量的对象,则只需使用es6 导入模块而不使用require.

我还使用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
}

Answer 3

共享服务是最好的方法

export class SharedService {
  globalVar:string;
}

但是在注册它时需要非常小心才能为整个应用程序共享一个实例.注册应用程序时需要定义它:

bootstrap(AppComponent, [SharedService]);

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

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

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

您可以查看有关依赖注入和分层注入器如何在Angular2中工作的这个问题:

• 在角度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);
  }
}

有关详细信息,请参阅此问题:

• 委托:Angular2中的EventEmitter或Observable

Answer 4

请参阅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);
  }
}

Answer 5

在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 6

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

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

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

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

window.GlobalVariable = "what ever!"

你不需要将它传递给bootstrap或将其导入其他地方,并且它可以全局访问所有JS(不仅仅是角度2组件).

Answer 8

这就是我使用它的方式:

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
}

编辑:根据建议将前缀"_"作为前缀.