Cum pot declara o variabilă globală în Unghiulare 2 / mașina de Scris?
As dori niste variabile pentru a fi accesibil peste tot într-un `Unghiulară 2 " în " mașina de Scris limba. Cum ar trebui să realiza acest lucru?
Aici este cea mai simplă soluție w/o "Serviciu", nici "Observator":
Pune variabile globale într-un fișier de export ei.
//
// ===== File globals.ts
//
'use strict';
export const sep='/';
export const version: string="22.2.2"; Pentru a utiliza globals într-un alt dosar folosi un "import" declarație:
import * ca myGlobals din './globals';
Exemplu:
//
// ===== 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";
...
}
}Multumesc @eric-martinez
Îmi place soluția la @supercobra prea. Aș vrea să-l îmbunătățească ușor. Dacă exportați un obiect care conține toate constantele, ai putea pur și simplu utilizați es6 import modulul fără a utiliza necesită.
De asemenea, am folosit un Obiect.freeze pentru a face proprietăți devin adevărate constante. Dacă sunteți interesați de subiect, ai putea citi acest post.
// global.ts
export const GlobalVariable = Object.freeze({
BASE_API_URL: 'http://example.com/',
//... more of your variables
});Se referă modulul utilizând import.
//anotherfile.ts that refers to global constants
import { GlobalVariable } from './path/global';
export class HeroService {
private baseApiUrl = GlobalVariable.BASE_API_URL;
//... more code
}
Un shared service este cea mai buna abordare
export class SharedService {
globalVar:string;
}Dar trebuie să fie foarte atenți atunci când înregistrarea să fie capabil de a împărtăși un singur exemplu pentru întreaga aplicație. Ai nevoie să-l definească în momentul înregistrării cererii dumneavoastră:
bootstrap(AppComponent, [SharedService]);dar nu să-l definească din nou în furnizori atribute ale componentelor:
@Component({
(...)
providers: [ SharedService ], // No
(...)
})În caz contrar, un nou exemplu de serviciu va fi creat pentru componente și sub-componente.
Puteți avea o privire la această întrebare în ceea ce privește modul de injectare dependență ierarhică și injectoarele de muncă în Angular2:
Se poate observa că puteți defini, de asemenea, `Observabile proprietăți în serviciul de a notifica părțile din cererea dumneavoastră atunci când global properties schimba:
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);
}
}A se vedea această întrebare pentru mai multe detalii:
A se vedea de exemplu 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);
}
}sau furnizează valori individuale
@NgModule({
providers: [{provide: 'myConfigValue', useValue: 'abc'}],
...
})
class MyComponent {
constructor(@Inject('myConfigValue') private myConfigValue:string) {
console.log(myConfigValue);
}
}
Crea Globals clasa in app/globals.ts:
import { Injectable } from '@angular/core';
Injectable()
export class Globals{
VAR1 = 'value1';
VAR2 = 'value2';
}În componentă:
import { Globals } from './globals';
@Component({
selector: 'my-app',
providers: [ Globals ],
template: `<h1>My Component {{globals.VAR1}}<h1/>`
})
export class AppComponent {
constructor(private globals: Globals){
}
}Notă: puteți adăuga Globals furnizor de servicii direct la modulul în loc de componentă, și nu veți avea nevoie să adăugați ca un furnizor pentru fiecare componentă în acel modul.
@NgModule({
imports: [...],
declarations: [...],
providers: [ Globals ],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
IMHO pentru Angular2 (v2.2.3) cel mai bun mod este de a adăuga servicii care conțin variabila globală și le injecta în componente, fără furnizorilor de tag-ul în interiorul @Component de adnotare. Prin acest fel aveți posibilitatea de a partaja informații între componente.
Un eșantion de servicii care detine o variabilă globală:
import { Injectable } from '@angular/core'
@Injectable()
export class SomeSharedService {
public globalVar = '';
}Un eșantion componentă care actualizări valoarea de variabile globale:
import { SomeSharedService } from '../services/index';
@Component({
templateUrl: '...'
})
export class UpdatingComponent {
constructor(private someSharedService: SomeSharedService) { }
updateValue() {
this.someSharedService.globalVar = 'updated value';
}
}Un eșantion componentă care citește valoarea de 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
}
}Notă: furnizorii: [ SomeSharedService ]
ar trebui să **nu** fi adăugate la@Componentde adnotare. Adăugând această linie de injecție vă va oferi întotdeauna aceeași instanță de SomeSharedService. Dacă adăugați o linie proaspăt creat exemplu este injectat.
Eu nu't știu cel mai bun mod, dar cel mai simplu mod dacă doriți să definiți o variabilă globală în interiorul unei componente este de a utiliza "fereastra" variabilă pentru a scrie astfel:
fereastră.GlobalVariable = "ce s-a!"
nu't nevoie pentru a trece la bootstrap sau de import-l în alte locuri, și este accesibil la nivel global pentru toate JS (nu numai unghiulare 2 componente).
Ca's modul în care am folosi-o:
global.ts
export var server: string = 'http://localhost:4200/';
export var var2: number = 2;
export var var3: string = 'var3';să-l folosească doar de import de genul asta:
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
}EDITAT: Ia o pauza "_" prefixate ca recomandat.
Cred că cel mai bun mod este de a împărtăși un obiect cu variabilele globale de-a lungul cererea dumneavoastră de exportul și importul de unde vrei.
În primul rând a crea un nou .ts fișier de exemplu globals.ts și declare un obiect. I-am dat o ** Obiect tip dar de asemenea, ai putea folosi un orice tip sau {}
export let globalVariables: Object = {
version: '1.3.3.7',
author: '0x1ad2',
everything: 42
};După care importa
import {globalVariables} from "path/to/your/globals.ts"Și să-l utilizați
console.log(globalVariables);
