Angular 2 / Typescriptでグローバル変数を宣言するにはどうすればよいですか？

私は、ある変数を Angular 2 の Typescript 言語でどこでもアクセスできるようにしたいと思います。どのようにこれを達成すればいいでしょうか？

Jeff
編集された質問 12日 5月 2019 в 1:01
プログラミング
angular typescript
22日 3月 2016 в 3:40
57 ビュー
質問へのコメント (3)
ソリューション

以下は、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'; //
snorkpete
編集した答え 6日 5月 2017 в 5:13
解説 (11)

@supercobraのソリューションも気に入っています。 少し改善したいと思います。 すべての定数を含むオブジェクトをエクスポートする場合は、 require を使用せずに、モジュールをes6 import 単に使用できます。

また、Object.freezeを使用して、プロパティを真の定数にしました。 トピックに興味がある場合は、この投稿を読むことができます。

// global.ts

 export const GlobalVariable = Object.freeze({
     BASE_API_URL: 'http://example.com/',
     //... more of your variables
 });

インポートを使用してモジュールを参照してください。

//anotherfile.ts that refers to global constants
import { GlobalVariable } from './path/global';

export class HeroService {
    private baseApiUrl = GlobalVariable.BASE_API_URL;

    //... more code
}
Tim Hong
編集した答え 2日 4月 2017 в 3:38
解説 (6)

シェアードサービスが最適なアプローチ

export class SharedService {
  globalVar:string;
}

しかし、アプリケーション全体で単一のインスタンスを共有できるようにするためには、登録時に非常に注意する必要があります。アプリケーションを登録する際に定義する必要があります。

bootstrap(AppComponent, [SharedService]);

しかし、コンポーネントの providers 属性の中で再度定義する必要はありません。

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

さもなければ、コンポーネントとそのサブコンポーネントに対して、サービスの新しいインスタンスが作成されます。

Angular2での依存性注入と階層型インジェクタの動作については、こちらの質問を参照してください。

また、グローバルプロパティが変更されたときにアプリケーションの一部に通知するために、サービス内に Observable プロパティを定義することができることに気づくことができるでしょう。

export class SharedService {
  globalVar:string;
  globalVarUpdate:Observable;
  globalVarObserver:Observer;

  constructor() {
    this.globalVarUpdate = Observable.create((observer:Observer) => {
      this.globalVarObserver = observer;
    });
  }

  updateGlobalVar(newValue:string) {
    this.globalVar = newValue;
    this.globalVarObserver.next(this.globalVar);
  }
}

詳しくはこちらの質問をご覧ください。

Community
編集した答え 23日 5月 2017 в 12:18
解説 (5)

例えば、https://stackoverflow.com/questions/35993778/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);
  }
}
Demodave
編集した答え 15日 2月 2018 в 2:46
解説 (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 {
}
解説 (3)

Angular2のIMHO(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
  }
}

「プロバイダー:[SomeSharedService]」は「@Component」注釈に not を追加する必要があることに注意してください。 この行を追加しないことにより、インジェクションは常に「SomeSharedService」の同じインスタンスを与えます。 行を追加すると、新しく作成されたインスタンスが注入されます。

解説 (3)

最善の方法はわかりませんが、コンポーネント内でグローバル変数を定義する場合の最も簡単な方法は、「ウィンドウ」変数を使用して次のように記述することです。

window.GlobalVariable = "これまで。!"。

ブートストラップや他の場所にインポートするために渡す必要はありません。また、すべてのJS(角度2コンポーネントだけでなく)にグローバルにアクセスできます。

解説 (6)

それが私の使い方です。

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'; //
Ferie
編集した答え 25日 4月 2019 в 5:21
解説 (1)

最善の方法は、オブジェクトをエクスポートしてインポートすることにより、アプリケーション全体でグローバル変数とオブジェクトを共有することです。

まず、 globals.ts などの新しい。ts ファイルを作成し、オブジェクトを宣言します。 オブジェクトタイプを与えましたが、任意のタイプまたは{{{}}}を使用することもできます。

export let globalVariables: Object = {
 version: '1.3.3.7',
 author: '0x1ad2',
 everything: 42
};

その後、それをインポートします。

import {globalVariables} from "path/to/your/globals.ts"

そしてそれを使用してください。

console.log(globalVariables);
Community
編集した答え 23日 5月 2017 в 11:33
解説 (0)

@supercobraの答えは好きですが、ES6にあるので、constキーワードを使用します。

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

export const sep='/';
export const version: string="22.2.2";
解説 (0)