Qual è il modo migliore per dichiarare una variabile globale in Angular 2/Typescript

Question

Desidero che alcune variabili siano accessibili ovunque in un Angular 2 nella lingua Typescript. Qual è il modo migliore per farlo?

Answer 1

Ecco la soluzione più semplice w/o Service né Observer:

Inserire le variabili globali in un file di un loro esportazione.

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

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

Per utilizzare variabili globali in un altro file utilizzare un import dichiarazione: import * as myGlobals from './globals';

Esempio:

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

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

     ... 

     } 
    } 

Grazie @ eric-martinez

Answer 2

Vedi per esempio 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); 
    } 
} 

o fornire valori individuali

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

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

Answer 3

un servizio condiviso è l'approccio migliore

export class SharedService { 
    globalVar:string; 
} 

ma è necessario essere molto attenti quando registrandolo per essere in grado di condividere una singola istanza per l'intera applicazione. È necessario definire al momento della registrazione la vostra applicazione:

bootstrap(AppComponent, [SharedService]); 

ma non di definire nuovamente entro i providers attributi dei componenti:

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

In caso contrario verrà creata una nuova istanza del servizio per la componente e sue sotto componenti.

Si può avere uno sguardo a questa domanda per quanto riguarda come la dipendenza di iniezione e iniettori gerarchici lavorano in Angular2:

• What's the best way to inject one service into another in angular 2 (Beta)?

si può notare che è anche possibile definire Observable proprietà nel servizio ai notifica parti della tua applicazione quando le tue proprietà globali cambiano:

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

Vedere questa domanda per maggiori dettagli:

• Delegation: EventEmitter or Observable in Angular2

Answer 4

non so il modo migliore , ma il modo più semplice se si desidera definire una variabile globale all'interno di un componente è utilizzare window variabl e per scrivere in questo modo:

window.GlobalVariable = "what ever!"

non c'è bisogno di passare per l'avvio o di importarlo in altri luoghi, ed è globalmente accessibile alle tutti JS (non solo angolari 2 componenti).

Answer 5

mi piace la risposta di @supercobra, ma vorrei usare la parola chiave const come è nel ES6 sezioni relative a:

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

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

Answer 6

mi piace la soluzione da @supercobra troppo. Vorrei solo migliorarlo leggermente. Se esporti un oggetto che contiene tutte le costanti, puoi semplicemente usare es6 importare il modulo senza usare richiedere.

Ho anche utilizzato Object.freeze per rendere le proprietà come costanti reali. Se sei interessato all'argomento, puoi leggere questo post.

// global.ts 

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

Fare riferimento al modulo utilizzando l'importazione.

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

export class HeroService { 
    private baseApiUrl = GlobalVariable.BASE_API_URL; 

    //... more code 
} 

Answer 7

Questo è il modo in cui lo uso:

global.ts

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

da usare solo importare così:

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 
     } 

CURA: Droped "_" prefissato come raccomandato.

Answer 8

Crea Globali di classe in app/globals.ts:

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

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

nel 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: è possibile aggiungere provider di servizi Globals direttamente al modulo, invece di il componente e non sarà necessario aggiungerlo come fornitore per ogni componente in quel modulo.

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

Answer 9

Penso che il modo migliore è quello di condividere un oggetto con variabili globali in tutta l'applicazione esportando e importando dove vuoi.

Innanzitutto creare un nuovo Ts di file, ad esempio globals.ts e dichiarare un oggetto. Ho dato un oggetto tipo, ma si potrebbe anche utilizzare un any type or {}

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

Dopo che l'importazione è

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

e usarlo

console.log(globalVariables); 

Answer 10

IMHO per Angular2 (v2.2.3) il modo migliore è aggiungere servizi che contengono la variabile globale e inserirli in componenti senza il tag providers all'interno dello 0 Annotazione. In questo modo puoi condividere le informazioni tra i componenti.

Un servizio di esempio possiede una variabile globale:

import { Injectable } from '@angular/core' 

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

Un componente di esempio aggiornamenti il valore della variabile globale:

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

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

    constructor(private someSharedService: SomeSharedService) { } 

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

Un componente di esempio legge il valore della variabile globale:

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

Note that providers: [ SomeSharedService ] should not be added to your @Component annotation. By not adding this line injection will always give you the same instance of SomeSharedService . If you add the line a freshly created instance is injected.