Como posso declarar uma variável global em Angular 2 / Typecript? [fechadas]

Eu gostaria que algumas variáveis ​​estivessem acessíveis em qualquer Angular 2lugar do Typescriptidioma. Como devo fazer isso?

Aqui está a solução mais simples w o / Servicenem Observer:

Coloque as variáveis ​​globais em um arquivo e exporte-as.

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

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

Para usar globais em outro arquivo, use uma importinstrução: import * as myGlobals from 'globals';

Exemplo:

// 
// ===== 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";

         ...

        }
    }

Obrigado @ eric-martinez

Também gosto da solução da @supercobra. Eu só gostaria de melhorar um pouco. Se você exportar um objeto que contenha todas as constantes, poderá simplesmente usar o es6 import o módulo sem usar o require .

Também usei o Object.freeze para tornar as propriedades verdadeiras constantes. Se você está interessado no tópico, pode ler esta postagem .

// global.ts

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

Consulte o módulo usando a importação.

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

export class HeroService {
    private baseApiUrl = GlobalVariable.BASE_API_URL;

    //... more code
}

Um serviço compartilhado é a melhor abordagem

export class SharedService {
  globalVar:string;
}

Mas você precisa ter muito cuidado ao registrá-lo para poder compartilhar uma única instância para todo o aplicativo. Você precisa defini-lo ao registrar seu aplicativo:

bootstrap(AppComponent, [SharedService]);

mas não para defini-lo novamente dentro dos providersatributos de seus componentes:

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

Caso contrário, uma nova instância do seu serviço será criada para o componente e seus subcomponentes.

Você pode dar uma olhada nesta pergunta sobre como a injeção de dependência e os injetores hierárquicos funcionam no Angular2:

• Qual é a melhor maneira de injetar um serviço em outro no angular 2 (Beta)?

Você pode perceber que também pode definir Observablepropriedades no serviço para notificar partes do seu aplicativo quando suas propriedades globais forem alteradas:

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

Veja esta pergunta para mais detalhes:

• Delegação: EventEmitter ou Observable in Angular2

Veja, por exemplo, Angular 2 - Implementação de serviços compartilhados

@Injectable() 
export class MyGlobals {
  readonly myConfigValue:string = 'abc';
}

@NgModule({
  providers: [MyGlobals],
  ...
})

class MyComponent {
  constructor(private myGlobals:MyGlobals) {
    console.log(myGlobals.myConfigValue);
  }
}

ou fornecer valores individuais

@NgModule({
  providers: [{provide: 'myConfigValue', useValue: 'abc'}],
  ...
})

class MyComponent {
  constructor(@Inject('myConfigValue') private myConfigValue:string) {
    console.log(myConfigValue);
  }
}

Crie a classe Globals em app / globals.ts :

import { Injectable } from '@angular/core';

Injectable()
export class Globals{
    VAR1 = 'value1';
    VAR2 = 'value2';
}

No seu componente:

import { Globals } from './globals';

@Component({
    selector: 'my-app',
    providers: [ Globals ],
    template: `<h1>My Component {{globals.VAR1}}<h1/>`
})
export class AppComponent {
    constructor(private globals: Globals){
    }
}

Nota : Você pode adicionar o provedor de serviços Globals diretamente ao módulo, em vez do componente, e não precisará adicionar como provedor a todos os componentes desse módulo.

@NgModule({
    imports: [...],
    declarations: [...],
    providers: [ Globals ],
    bootstrap: [ AppComponent ]
})
export class AppModule {
}

O IMHO para Angular2 (v2.2.3), a melhor maneira é adicionar serviços que contenham a variável global e injetá-los em componentes sem a providerstag dentro da @Componentanotação. Dessa forma, você pode compartilhar informações entre componentes.

Um serviço de amostra que possui uma variável global:

import { Injectable } from '@angular/core'

@Injectable()
export class SomeSharedService {
  public globalVar = '';
}

Um componente de amostra que atualiza o valor da sua variável global:

import { SomeSharedService } from '../services/index';

@Component({
  templateUrl: '...'
})
export class UpdatingComponent {

  constructor(private someSharedService: SomeSharedService) { }

  updateValue() {
    this.someSharedService.globalVar = 'updated value';
  }
}

Um componente de amostra que lê o valor da sua variável global:

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

Observe que nãoproviders: [ SomeSharedService ] deve ser adicionado à sua anotação. Ao não adicionar esta injeção de linha, você sempre terá a mesma instância de . Se você adicionar a linha, uma instância recém-criada será injetada.@ComponentSomeSharedService

Não sei a melhor maneira, mas a maneira mais fácil, se você deseja definir uma variável global dentro de um componente, é usar a windowvariável para escrever assim:

window.GlobalVariable = "what ever!"

você não precisa transmiti-lo para inicializar ou importar outros locais, e é acessível globalmente a todos os JS (não apenas aos componentes angulares 2).

É assim que eu uso:

global.ts

export var server: string = 'http://localhost:4200/';
export var var2: number = 2;
export var var3: string = 'var3';

para usá-lo, basta importar assim:

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
}

EDITADO: Eliminado o prefixo "_" conforme recomendado.

Eu acho que a melhor maneira é compartilhar um objeto com variáveis ​​globais em todo o aplicativo, exportando e importando-o para onde você quiser.

Primeiro, crie um novo arquivo .ts, por exemplo, globals.ts e declare um objeto. Eu dei a ele um tipo de objeto, mas você também pode usar qualquer tipo ou {}

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

Depois disso, importe

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

E use

console.log(globalVariables);

Eu gosto da resposta de @supercobra, mas usaria a palavra-chave const, pois ela já está disponível no ES6:

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

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