2017-06-29 9 views
0

私は、重複したコードでプロジェクトをクリーンアップしようとしていますが、私はバックエンドを複数のコンポーネントから私のプログラムをダウン。作るつのサービスをしている私もやってみたかった何Observable.subscribe()内のObservableを角2で宣言する

this.http.get(this.ds.services_URL).map((res)=>res.json()).subscribe(
     (data) =>{ 
     this.Services=data; 
     }); 

は、以前は、各コンポーネント、ngOnInit()メソッド内で、サービスの配列を初期化するために、それにこのようなものを持っていましたhttpコールを1回実行すれば、私のコンポーネントはデータのサービスを要求できます。私は私のサービスでは、このような何か持ってみた

private loadServices() 
{ 
    this.http.get(this.services_URL).map((res)=>res.json()).subscribe(
     (data) =>{ 
      this.serviceO=new Observable(observer=>{ 
      setTimeout(()=>{ 
      observer.next(data); 
      observer.complete(); 
      },1000); 
     }); 
    }); 
} 

serviceOが観察さが、異なるコンポーネントではなくhttp.get結果よりも、それを購読するでしょう。

Observableの値を実際に設定する方法がわからないという事実に加えて、私たちはObservable全体を非同期的に再定義しているため、Observerは実際には参照できません。私が直面している問題を見て、私は正しい方向に進んでいないと思うので、どのようにすれば良い方向を知ることができますか?(私は "プロパティを読み込むことができません"例外のような種類のプロパティを購読できません)

達成したいことを達成する?

+0

達成しようとしていることは何ですか? setTimeoutとは何ですか?戻り値this.http.get(this.services_URL).map(res => res.json()); '? –

+0

タイムアウトは何のためでもありません。Observableの値を実際に設定する方法を説明した唯一のチュートリアルです。 問題は、毎回サービスを呼びたくないということです –

答えて

2

これは、観測可能なものを共有し、その結果をサービス内に格納することでこれに近づいています。コンポーネントがそのデータを必要とするたびに、それは代わりに新しい要求(https://plnkr.co/edit/M9ZIViYhSbKzPlzKXC7H

export class Service { 
 
    observableShare: Observable<string>; // store the shared observable 
 
    observableResult: string; // store the result of the observable when complete 
 
    
 
    constructor(private http: Http){} 
 
    
 
    getData(){ 
 
    if(this.observableResult){ // if result has already been found (api has completed) return result 
 
     // create dummy observable and return results 
 
     return new Observable<string>(observer => { 
 
     observer.next(this.observableResult); 
 
     observer.complete(); 
 
     }) 
 
    }else if(this.observableShare){ // else if api is still processing, return shared observable 
 
     return this.observableShare; 
 
    }else{ // else api has not started, start api and return shared observable 
 
     this.observableShare = this.http.get('url') 
 
     .map(res => { 
 
      this.observableResult = res; // store result in service 
 
     
 
      console.log('observable sequence', res); // note, this only runs once even though there are 3 separate subscribes 
 
      return res; 
 
     }) 
 
     .share(); // share observable sequence among multiple subscribers 
 
     
 
     return this.observableShare; 
 
    } 
 
    
 
    
 
    } 
 
}

それでは、ここで起こっていることのgetDataを呼び出すための第一成分がある()を開始することで保存された結果を使用することができますhttpリクエスト別のコンポーネントがのデータを必要とする場合は、の要求が完了する前に、共有のobservableを受け取ります。これにより、(同じデータに対する)複数のHTTPリクエストが確実に起動されます。最後に、コンポーネントがgetData()を呼び出し、HTTPリクエストがすでにが終了した場合が終了した場合、getData()は保存された値でオブザーバブルを作成します。これで、複数のコンポーネントが1つのhttp要求だけでオブザーバブルに登録できます。

関連する問題