使用Angular 2/4中的Observable定期使用http服务中的数据

Question

我正在学习使用angular（4）作为我的REST api后端的前端。

我目前有一个PostList组件，显示帖子列表。 我在我的daoService中使用返回一个Observable>，并在我的PostListComponent中的onInit中包含它。 这一切都很好，我很满意它，但是我想使用像interval这样的东西自动拨打这个电话，比如5秒。 我最初尝试遵循官方角度网站https://angular.io/docs/ts/latest/tutorial/toh-pt6.html#!#sts=Observables中看到的类似模式，但用例不同足够多，我的项目结构不足以让我以一种有用的方式跟随它并最终放弃了。 我有很多google，我正在努力找到一种直接的方式，我可以使用观察者/订阅者模式定期消耗我的api中的数据。

关于我如何调整以下代码来定期进行调用的任何建议对我来说都非常有用，而且我想，很多其他开发人员对角度很新。

import { Injectable } from '@angular/core';
import { Http, RequestOptions } from '@angular/http';
import {Post} from '../class/post';
import 'rxjs/add/operator/toPromise';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class PostDaoService      {

  private jwt: String;

  private commentsUrl = 'http://MYDOMAIN/posts';

  constructor(private http: Http, private opt: RequestOptions) {
    // tslint:disable-next-line:max-line-length
    this.jwt = 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJQYXNjYNFHUHSFWQiOiIxMjMiLCJyb2xlIjoiYWRtaW4ifQ.4D9TUDQAgIWAooyiMN1lV8Y5wVCrIF4rAeGzFzelSE9diqHMik9WE9x4EsNnEcxQXYATjxAZovpp-m72LpFADA';
   }

  getPosts(): Observable<Array<Post>> {
    this.opt.headers.set('Authorization', 'Bearer ' + this.jwt);
    this.opt.headers.set('Content-Type', 'application/json');
    return this.http.get(this.commentsUrl)
      .map((response) => response.json())
      .map((data: any) => {
        return data._embedded.posts as Post[];
      });
  }
}

import { ContextMenuService } from '../../../baseui-module/context-menu/context-menu.service';

import { Post } from '../../class/post';
import { PostDaoService } from '../../service/post-dao.service';
import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
})
export class PostListComponent implements OnInit {

  posts: Post[];

  constructor(public service: ContextMenuService, public dao: PostDaoService) { }

  ngOnInit() {
    this.service.postItems();
    this.dao.getPosts().subscribe((data: Array<Post>) => {
      this.posts = data;
    });
  }

  public getItems(): Post[] {
    return this.posts;
  }
}

Answer 1

诀窍是使用mergeMap / flatMap （取决于你的rxjs版本）：

getPosts(trigger: Observable<any>): Observable<Array<Post>> {
  this.opt.headers.set('Authorization', 'Bearer ' + this.jwt);
  this.opt.headers.set('Content-Type', 'application/json');
  return trigger.flatMap(() =>
     this.http.get(this.commentsUrl)
      .map((response) => response.json())
      .map((data: any) => {
        return data._embedded.posts as Post[];
      });
}

然后在你的组件中：

this.dao.getPosts(Observable.timerInterval(0, 5000)
   .subscribe(data => ....);

显然你可以将它与其他触发器一起使用：

this.dao.getPosts(Observable.fromEvent(refreshButton, 'click'))

单击刷新按钮时刷新

顺便说一句，你可能想避免订阅而是定义：

this.posts$ = this.dao.getPosts(...);

并在您的模板中：

<any *ngFor="let post of posts$">post display here</any>

这将更有效，并降低悬挂订户和内存泄漏的风险。