我制作了一个Angular 2服务,成功从我的服务器获取数据。它有一个名为getSinglePowerBlock
的函数。此函数的目标是设置一个observable以对给定的URL发出get
请求,并从JSON属性powerblock
返回一个assets.powerblock[]
元素。我知道这个成功,因为我可以让它在我的一个组件中工作。我已将该组件包含在内,以供参考。
我的目标:
我希望我的代码使用get
库中的interval
函数连续进行rxjs
调用,每秒一次。然后,我希望我的本地数据使用每个轮询响应中的数据进行更新。基本上是一种投票解决方案。
我想它并不难做,但我是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",
}
]
}
}
答案 0 :(得分:2)
我认为在返回的promise / observable上调用一个区间是明智的,但是如果你只是返回数据(不是observable / promise),你可以在angular2中的计时器内执行此操作。它将在1秒后连续调用该函数
import {OnInit, OnDestroy} from '@angular/core';
在您的组件中创建订阅持有者变量
private timerSubscription: any; //just to hold the reference
您可以在OnInit事件中初始化计时器并在您的变量中返回订阅,以便稍后在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();
}