使用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>

這將更有效，並降低懸掛訂戶和內存泄漏的風險。