Angular2 http间隔
我对angular和rxjs很新。 我正在尝试创build一个angular2应用程序，从静态提供的文本文件（本地服务器）获取一些数据，我希望使用Angular2的http提供程序和rxjs的映射以固定的时间interval(5000)检索并映射到Datamodel。 反映对提供的txt文件的任何更改。
使用rxjs 4.x我知道你可以使用Observable.interval(5000)来完成这个工作，但似乎并不存在于rxjs中5.我的解决方法是使用<meta http-equiv="refresh" content="5" >刷新整个应用程序<meta http-equiv="refresh" content="5" >重新加载整个页面，从而重新加载数据。
所以我真正喜欢的是用observables来做这个工作，也许去检查是否有任何变化。 或者只是重新加载数据。
任何帮助或其他/更好的方式将非常感激。
我到目前为止：
@Injectable() export class DataService { constructor(private http:Http){} getData(url) { return this.http.get(url) .map(res => { return res.text(); }) .map(res => { return res.split("\n"); }) .map(res => { var dataModels: DataModel[] = []; res.forEach(str => { var s = str.split(","); if(s[0] !== "") { dataModels.push(new DataModel(s[0], parseInt(s[1]), parseInt(s[2]))); } }); return dataModels; }) } } @Component({ selector: 'my-app', template: `Some html to display the data`, providers: [DataService], export class AppComponent { data:DataModel[]; constructor(dataService:DataService) {} ngOnInit() { this.dataService.getData('url').subscribe( res => { this.data= res; }, err => console.log(err), () => console.log("Data received") ); } }
依赖关系：package.json "dependencies": { "angular2": "^2.0.0-beta.3", "bootstrap": "^4.0.0-alpha.2", "es6-promise": "^3.0.2", "es6-shim": "^0.33.13", "jquery": "^2.2.0", "reflect-metadata": "^0.1.2", "rxjs": "^5.0.0-beta.0", "systemjs": "^0.19.20", "zone.js": "^0.5.11" }, "devDependencies": { "typescript": "^1.7.5" }
index.html导入：
<script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/systemjs/dist/system-polyfills.js"></script> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script src="node_modules/angular2/bundles/router.dev.js"></script> <script src="node_modules/angular2/bundles/http.dev.js"></script>
正如@Adam和@Ploppy所提到的那样，Observable.interval（）现在已经被弃用，而不是创build这种可观察的首选方式。 这样做的首选方法是通过IntervalObservable或TimerObservable。 [目前在Typscript 2.5.2，rxjs 5.4.3，Angular 4.0.0]
我想添加一些用法来解释这个答案，以certificate我在Angular 2框架中find了最好的方法。
首先你的服务（通过'ng g service MyExample'命令在angular度cli中创build）假设服务是RESTful（http get请求返回一个json）：
我-example.service.ts
import { Injectable } from '@angular/core'; import { Http, Response} from "@angular/http"; import { MyDataModel } from "./my-data-model"; import { Observable } from "rxjs"; import 'rxjs/Rx'; @Injectable() export class MyExampleService { private url = 'http://localhost:3000'; // full uri of the service to consume here constructor(private http: Http) { } get(): Observable<MyDataModel>{ return this.http .get(this.url) .map((res: Response) => res.json()); } }
现在你的组件代码（'ng g component MyExample'）：
我-example.component.ts：
import { Component, OnDestroy, OnInit } from '@angular/core'; import { MyDataModel } from "../my-data-model"; import { MyExampleService } from "../my-example.service"; import { Observable } from "rxjs"; import { IntervalObservable } from "rxjs/observable/IntervalObservable"; @Component({ selector: 'app-my-example', templateUrl: './my-example.component.html', styleUrls: ['./my-example.component.css'] }) export class MyExampleComponent implements OnInit, OnDestroy { private data: MyDataModel; private display: boolean; // whether to display info in the component // use *ngIf="display" in your html to take // advantage of this private alive: boolean; // used to unsubscribe from the IntervalObservable // when OnDestroy is called. constructor(private myExampleService: MyExampleService) { this.display = false; this.alive = true; } ngOnInit() { // get our data immediately when the component inits this.myExampleService.get() .first() // only gets fired once .subscribe((data) => { this.data = data; this.display = true; }); // get our data every subsequent 10 seconds IntervalObservable.create(10000) .takeWhile(() => this.alive) // only fires when component is alive .subscribe(() => { this.myExampleService.get() .subscribe(data => { this.data = data; }); }); } ngOnDestroy(){ this.alive = false; // switches your IntervalObservable off } }
===编辑===
更新了组件ts代码，以通过TimerObservable整合订阅：
import { Component, OnDestroy, OnInit } from '@angular/core'; import { MyDataModel } from "../my-data-model"; import { MyExampleService } from "../my-example.service"; import { Observable } from "rxjs"; import { TimerObservable } from "rxjs/observable/TimerObservable"; @Component({ selector: 'app-my-example', templateUrl: './my-example.component.html', styleUrls: ['./my-example.component.css'] }) export class MyExampleComponent implements OnInit, OnDestroy { private data: MyDataModel; private display: boolean; // whether to display info in the component // use *ngIf="display" in your html to take // advantage of this private alive: boolean; // used to unsubscribe from the TimerObservable // when OnDestroy is called. private interval: number; constructor(private myExampleService: MyExampleService) { this.display = false; this.alive = true; this.interval = 10000; } ngOnInit() { TimerObservable.create(0, this.interval) .takeWhile(() => this.alive) .subscribe(() => { this.myExampleService.get() .subscribe((data) => { this.data = data; if(!this.display){ this.display = true; } }); }); } ngOnDestroy(){ this.alive = false; // switches your TimerObservable off } }
您可以使用Angular2中的Observable的interval方法。
import {Component,Input} from 'angular2/core'; import {Observable} from 'rxjs/Rx'; @Component({ selector: 'my-app', template: ` <div> {{message}} </div> ` }) export class AppComponent { constructor() { Observable.interval(500) .take(10).map((x) => x+1) .subscribe((x) => { this.message = x; }): } }
这是描述这个的相应的plunkr： https ://plnkr.co/edit/pVMEbbGSzMwSBS4XEXJI?p = preview。
基于此，您可以插入您的HTTP请求：
initializePolling() { return Observable .interval(60000) .flatMap(() => { return this.dataService.getData('url')); }); }
我认为这个答案是无效的，因为最近rxjs / observable的变化你现在必须使用IntervalObservable。
https://github.com/ReactiveX/rxjs/blob/master/src/observable/IntervalObservable.ts
import { IntervalObservable } from 'rxjs/observable/IntervalObservable'; @Component({ ... }) export class AppComponent { n: number = 0; constructor() { IntervalObservable.create(1000).subscribe(n => this.n = n); } }
对于TypeScript（回答时为1.8.10）/ angular2（rc1在回答时）和rxjs@5.0.0（答案时为beta.6），您需要使用扩展Observable类的IntervalObservable
import {IntervalObservable} from 'rxjs/observable/IntervalObservable' IntervalObservable.create(5000).take(10).map((x) => x + 1)
