Angular2 全局变量可观察

Question

我对 angular2 相当陌生，我有点被困住了。

我创建了一个全局设置服务。此服务从 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 时，它返回空。该服务在引导程序中定义。

我需要使"设置"变量可观察吗？任何帮助将不胜感激！

啧

啧！

Answer 1

在

服务中使用 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 中，我有一个子组件，它等待 4 秒，然后subscribe()秒，以显示确实检索了最新/当前值。 Plunker还演示了asyncPipe的使用。

Answer 2

我会使用 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 3

为什么

不像这样使用你的服务：-

  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()方法获取数据并显示在视图上