Angular 2 / Typescript'te global bir değişkeni nasıl bildirebilirim?

Bazı değişkenlerin Typescript dilinde bir Angular 2 içinde her yerden erişilebilir olmasını istiyorum. Bunu başarmak için nasıl bir yol izlemeliyim?

Çözüm

İşte Service veya Observer olmadan en basit çözüm:

Global değişkenleri bir dosyaya koyun ve dışa aktarın.

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

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

Globalleri başka bir dosyada kullanmak için import deyimini kullanın: import * as myGlobals from './globals';

Örnek:


// 
// ===== 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'; //
Yorumlar (11)

Paylaşılan bir hizmet en iyi yaklaşımdır

export class SharedService {
  globalVar:string;
}

Ancak tüm uygulamanız için tek bir örneği paylaşabilmek için bunu kaydederken çok dikkatli olmanız gerekir. Uygulamanızı kaydederken bunu tanımlamanız gerekir:

bootstrap(AppComponent, [SharedService]);

ancak bileşenlerinizin providers nitelikleri içinde tekrar tanımlamayın:

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

Aksi takdirde, bileşen ve alt bileşenleri için hizmetinizin yeni bir örneği oluşturulacaktır.

Angular2'de bağımlılık enjeksiyonu ve hiyerarşik enjektörlerin nasıl çalıştığına ilişkin bu soruya göz atabilirsiniz:

Global özellikleriniz değiştiğinde uygulamanızın bölümlerini bilgilendirmek için serviste Observable özellikleri de tanımlayabileceğinizi fark edebilirsiniz:

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

Daha fazla ayrıntı için bu soruya bakın:

Yorumlar (5)

Örneğin bkz. 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);
  }
}

veya bireysel değerler sağlayın

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

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