Angular 2 Http Observable RequestにIntevalを設定する方法

Question

サーバからデータを正常に取得するAngular 2サービスを作成しました。それにはgetSinglePowerBlockという1つの関数があります。この関数の目的は、指定可能なURLにgetリクエストを行い、assets.powerblock[]のpowerblock要素の1つを返すように、オブザーバブルを設定することです。私はそれが私のコンポーネントの一つで動作するようになるので、これがうまく動作することを知っています。私はそのコンポーネントを参照のために含めました。

私の目標： 私は私のコードはrxjsライブラリからinterval機能を使用して、1秒に1回、連続getコールを作りたいです。次に、ローカルデータが各ポーリングレスポンスのデータで更新されるようにします。基本的には、ポーリングの解決策です。

私はObservablesとRxjsの方が新しく、構文が正しいとは思えません。 getPowerBlockの機能または私がそれを呼び出す方法を自由に行うためのよりよい方法を提供してください。私はあなたが私よりもずっと賢いと確信しています。

このコンポーネントがユーザーによって表示されている現在のページの場合のみ、ポーリングをオンにします。

サービス：

import { Injectable }  from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable }  from 'rxjs'; 
import 'rxjs/Rx'; 

import { PowerBlock } from './classes/power-block'; 

@Injectable() 
export class ServerCommsService { 

    private pbIndex: number = 0; 

    constructor (private http: Http) {} 

    getPowerBlock(): Observable<PowerBlock> { 
    return this.http 
     .get('/database-calls/getdata?type=powerblock') 
     .map((r: Response) => r.json().assets.powerblock[this.pbIndex] as PowerBlock); 
    } 
} 

サービスを使用してコンポーネント：

import { Component, OnInit } from '@angular/core'; 
import { Observable }  from 'rxjs/Observable'; 

import { PowerBlock } from '../classes/power-block'; 
import { ServerCommsService } from '../server-comms.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'power-block', 
    templateUrl: 'power-block.component.html' 
}) 
export class PowerBlockComponent implements OnInit { 
    public title: string = 'PowerBlock'; 
    private powerBlock: PowerBlock; 

    constructor(
    private server: ServerCommsService 
) {} 

    ngOnInit(): void { 
    this.server.getPowerBlock().subscribe(
     pb => this.powerBlock = pb, 
     err => {console.log(err)} 
    ); 
    } 
} 

JSONがサーバから返された：

{ 
    "assets": { 
     "powerblock": [ 
      { 
       "id": "001", 
       "name": "PB1", 
      }, 
      { 
       "id": "002", 
       "name": "PB2", 
      } 
     ] 
    } 
} 

Answer 1

私はそうその思いはありません返された約束/観測可能な期間に通話をするのが賢明ですが、もしあなたが戻ってきたらデータ（観測不可/約束）では、これをangular2のタイマーの中で行うことができます。これは、継続的に順番にあなたののOnInitイベントでタイマーを初期化し、戻ってあなたの変数にサブスクリプションを取得することができ、あなたのコンポーネントに

private timerSubscription: any; //just to hold the reference 

を購読ホルダー変数を作成し、1秒

import {OnInit, OnDestroy} from '@angular/core'; 

後に関数を呼び出します後でOnDestroyで退会する。

ngOnInit() 
{ 
    //start a timer after one second 
    let timer = Observable.timer(1000, 1000); 
    this.timerSubscription = timer.subscribe((t:any) => { 
     //call your getPowerBlock function here 
    }); 
} 

最後に、不要になったサブスクリプションを破棄するだけです。

ngOnDestroy() 
{ 
    if(this.timerSubscription) 
     this.timerSubscription.unsubscribe(); 
}