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

Question

我希望在 Typescript 语言中的 Angular 2 中可以随处访问一些变量。我应该如何去完成这个？

原文由 supercobra 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 (**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

原文由 supercobra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 Timo Bähr 发布，翻译遵循 CC BY-SA 3.0 许可协议