Angular 2 / Typescript에서 전역 변수를 어떻게 선언 할 수 있습니까? [닫은]

나는 도처에 액세스 할 수 있도록 몇 가지 변수를 원하는 Angular 2의 Typescript언어. 이것을 달성하려면 어떻게해야합니까?

여기 / O w 간단한 해결책이 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의 솔루션도 좋아합니다. 그냥 약간 개선하고 싶습니다. 모든 상수를 포함하는 객체를 내 보내면 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
}

공유 서비스가 가장 좋습니다

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);
  }
}

자세한 내용은이 질문을 참조하십시오.

• 위임 : Angular2에서 EventEmitter 또는 Observable

예를 들어 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);
  }
}

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 {
}

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됩니다. 라인을 추가하면 새로 생성 된 인스턴스가 주입됩니다.

가장 좋은 방법은 모르지만 구성 요소 내부에 전역 변수를 정의하려는 경우 가장 쉬운 방법은 window변수를 사용 하여 다음과 같이 작성하는 것입니다.

window.GlobalVariable = "what ever!"

부트 스트랩에 전달하거나 다른 위치로 가져올 필요가 없으며 모든 JS (각도 2 구성 요소뿐만 아니라)에 전역 적으로 액세스 할 수 있습니다.

그것이 내가 사용하는 방식입니다.

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
}

편집 됨 : "_"접두어를 권장에 따라 삭제했습니다.

가장 좋은 방법은 원하는 곳으로 내보내고 가져 와서 응용 프로그램 전체에서 전역 변수와 객체를 공유하는 것입니다.

먼저 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);

나는 @ supercobra의 답변을 좋아하지만 이미 사용 가능한 ES6에서 const 키워드를 사용합니다.

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

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