如何在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";    

要在另一个文件中使用全局变量，请使用以下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";

         ...

        }

    }

Answer 2

共享服务是最好的方法

export class SharedService {

  globalVar:string;

}

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

bootstrap(AppComponent, [SharedService]);

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

@Component({

  (...)

  providers: [ SharedService ], // No

  (...)

})

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

您可以看一下有关Angular2中依赖项注入和分层注入器如何工作的问题：

将一项服务以角度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);

  }

}