Angular2全局变量可观察

Question

我对angular2相当陌生，我有点卡在某物上。

我创建了一个全局的settings.service。此服务从API获取设置并使用收集的数据填充设置模型。

服务：

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

这工作得很好，当我在.MAP测试返回数据的设置正确

但是，当我尝试从我需要组件调用的getSettings这个数据，它返回空。该服务在引导程序中定义。

我是否需要使'settings'变量可观察？任何帮助将不胜感激！

Tnx！

Answer 1

我会实现缓存到使用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; 
    } 
} 

Answer 2

为什么你不使用你的服务是这样的： -

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

，比使用.subscribe()方法要得到数据和视图上显示

Answer 3

在您的服务中使用BehaviorSubject。这已经是共享的，它会给新用户的当前值（它确实是这样的缓存你）：

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

然后使用可观察到的在您的模板与asyncPipe，或将数据提取到一个组分变量：

this.settings$ = this._myService.settings$; // use with asyncPipe 
this._myService.settings$.subscribe(data => this.settings = data); 

Plunker

在Plunker我有等待4秒钟，然后再01子组件s，以显示确实检索到最新/当前值。 Plunker还演示了asyncPipe的使用。