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

新手上路,请多包涵

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

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

阅读 646
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

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

恕我直言,对于 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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进