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?
İş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'; //<==== 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";
...
}
}
Teşekkürler @eric-martinez
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<string>;
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:
Ö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);
}
}