使用Observable in Angular定期使用http服務中的數據2/4

Question

我正在學習使用angular（4）作爲我的REST api後端的前端。

我目前有一個PostList組件顯示帖子列表。我在我的daoService中使用返回一個Observable>，並在我的PostListComponent中的onInit中引用這個。 這一切工作正常，即時通訊相當滿意，但我想使用像間隔這樣的東西，每5秒自動進行一次呼叫。 我最初嘗試遵循一些類似的模式，如在https://angular.io/docs/ts/latest/tutorial/toh-pt6.html#!#sts=Observables的官方角度站點中所看到的，但是用例不夠充分，我的項目結構足夠差，導致我遇到了實際的問題，最終放棄了它。我有谷歌周圍相當多，並正在努力找到一個直接的方式，我可以定期從我的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> 

這將是更有效並降低用戶和內存泄漏的風險。