[英]Angular2 global variable observable
I'm fairly new to angular2 and I'm kinda stuck on something. 我对angular2很新,我有点卡在某事上。
I've created a global settings.service. 我创建了一个全局settings.service。 This service fetches settings from an API and populate the settings model with the collected data.
此服务从API获取设置,并使用收集的数据填充设置模型。
The service: 服务:
public settings : settingsModel;
constructor(public http: Http){
this.setSettings()
.subscribe(
(data) => {
this.settings = data
});
}
setSettings() : Observable<any>{
return : this.http.get('/settings')
.map(response => response.json());
}
getSettings(){
return this.settings;
}
This works fine and the settings are correctly set when I test the return data in the .map 这工作正常,我在.map中测试返回数据时正确设置了设置
But when I try to call GetSettings from the component where I need this data, it returns empty. 但是当我尝试从需要此数据的组件调用GetSettings时,它返回空。 The service is defined in the bootstrap.
该服务在引导程序中定义。
Do I need to make the 'settings' variable observable? 我是否需要使'settings'变量可观察? Any help would be highly appreciated!
任何帮助将非常感谢!
Tnx! TNX!
Use a BehaviorSubject in your service. 在您的服务中使用BehaviorSubject 。 It is already shared, and it will give new subscribers the current value (so it does the caching for you):
它已经共享,它将为新订阅者提供当前值(因此它为您进行缓存):
import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {settingsModel} from 'settingsModel';
@Injectable()
export class MyService {
private _settingsSource = new BehaviorSubject<settingsModel>(null);
settings$ = this._settingsSource.asObservable();
constructor(private _http:Http) {
this._http.get('./settings.json')
.subscribe(response => {
//console.log('response', response)
this._settingsSource.next(response.json())
});
}
}
Then use the observable in your template with the asyncPipe, or extract the data into a component variable: 然后使用模板中的observable和asyncPipe,或者将数据提取到组件变量中:
this.settings$ = this._myService.settings$; // use with asyncPipe
this._myService.settings$.subscribe(data => this.settings = data);
In the Plunker I have a child component that waits 4 seconds and then subscribe()
s, to show that the latest/current value is indeed retrieved. 在Plunker中我有一个等待4秒的子组件然后
subscribe()
s,以显示确实检索到最新/当前值。 The Plunker also demonstrates use of the asyncPipe. Plunker还演示了asyncPipe的使用。
I would implement caching into your service using the do
operator: 我将使用
do
运算符将缓存实现到您的服务中:
private settings : settingsModel;
constructor(public http: Http){
this.settingsObservable = this.http.get('/settings')
.map(response => response.json())
.do(settings => {
this.settings = settings;
}).share();
}
getSettings() {
if (this.settings) {
return Observable.of(this.settings);
} else {
return this.settingsObservable;
}
}
why not you use your service like this :- 为什么不使用这样的服务: -
public settings : settingsModel;
constructor(public http: Http){ }
GetSettings(){
return this.http.get('/settings')
.map(response => {
this.settings = response.json() // here setting your data to `this.setting`
return this.settings;
})
.catch(err => {
console.log(err) // handle your error as you want to handle
})
}
and than use .subscribe()
method where you want to get the data and show on the view 然后使用
.subscribe()
方法来获取数据并在视图上显示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.