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的使用。