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 时，它返回空。该服务在 Bootstrap 中定义。

我需要让“设置”变量可观察吗？任何帮助将不胜感激!

谢谢!

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

在 Plunker 中，我有一个等待 4 秒的子组件，然后是 subscribe()，以显示确实检索到最新/当前值。 Plunker 还演示了 asyncPipe 的使用。