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

这将是更有效并降低用户和内存泄漏的风险。