使用Ionic 2 / Angular 2更新列表 [英] Keep list updated with Ionic 2 / Angular 2

问题描述

我有一个使用Ionic 2开发的使用Angular 2的应用程序。

I have an application developed with Ionic 2 that uses Angular 2.

我想以两种方式更新我的组件列表。

I want to update the list of my component in two ways.

1. 自动 - 如果没有更新，或者上次更新超过30分钟前是
   ，请刷新。


2. 手动 - 如果用户不想等到下一次更新，他可以随时手动更新。

当用户离开页面取消自动刷新，当他回来重新初始化。我不希望在用户进入页面时立即更新，但仅在完成自上次更新后30分钟时才更新。

When the user leaves the page cancel the automatic refresh and when he comes back re-initialize. I do not want to update immediately when the user enters the page, but only when it completes 30 minutes since the last update.

实现此目的的最佳方式是什么？ ？我想知道更新是否会发生冲突，如果是，如何取消所有内容并继续进行最后一次通话？

What would be the best way to achieve this? I wonder if the updates can conflict, and if yes how to cancel all and proceed only with the last call?

我是Angular 2的新手我是一个与Observables有点混淆。以下是我的内容：

I'm new to Angular 2 and I'm a bit confused with the Observables. Here is what I have:

import { Component } from '@angular/core';
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/mergeMap';
import "rxjs/add/observable/interval";

import { NavController } from 'ionic-angular';

import { EventData } from '../../providers/event-data';

@Component({
  selector: 'page-event-list',
  templateUrl: 'event-list.html'
})
export class EventListPage {
  public events = [];
  private subscription;

  constructor(public navCtrl: NavController, public eventData: EventData) {}

  ionViewDidEnter() {
    this.load();
  }

  ionViewDidLeave() {
    this.cancel();
  }

  load() {
    let observable = Observable
      .interval(10000)
      .flatMap(() => {
        return this.eventData.load();
      })
      .share();

    this.subscription = observable
      .subscribe(events => this.events = events, error => console.log(error));

    return observable;
  }

  reload(refresher) {
    this.load()
      .subscribe(null, null, () => refresher.complete());
  }

  cancel() {
    if (this.subscription.closed) {
      return;
    }

    this.subscription.unsubscribe();
  }

}

推荐答案

您可以通过以下方式解决此问题：

You could solve this by using something like this:

// this can be a click-event, or anything else, in this case it'll just be a simple manualTrigger$.next();
let manualTrigger$ = new Rx.Subject();

// the timer will trigger immediately and then every 30seconds
let intervalTrigger$ = new Rx.Observable.timer(0, 30000);

// this is our actual combination "logic", a simple "switchMapTo"
// switchMap switches to a new subscription of our timer each time manualTrigger$ triggers and discards the old one
let resetIntervalWhenTriggeredManually$ = manualTrigger$
  .switchMapTo(intervalTrigger$);

// make sure to unsubscribe when the view is destroyed or just use the async-pipe in your template!
resetIntervalWhenTriggeredManually$
  .flatMap(makeRestCall); // here you insert your rest-call
  .subscribe(
      data => console.log("Data is:", data),
      error => console.error("Error: " + error)
  );

您还可以在此处查看此jsbin以获取运行示例： http://jsbin.com/titujecuba/edit?js,console

You can also checkout this jsbin here for a running example: http://jsbin.com/titujecuba/edit?js,console

当用户离开/进入页面时，您想要自动停止/继续更新的部分无法使用纯rxjs完成，您必须在某处保留日期上次更新和检查的是小时段：

The part where you want to automatically stop/continue the updates when the user leaves/enters the page, cannot be done with pure rxjs, you will have to keep a date somewhere of the last update and check is small periods:

// check every second
const thirtyMinutes: number = 1000 * 60 * 30;
let lastUpdated: number = -1;
let intervalTrigger$ = new Rx.Observable.timer(0, 1000);
let resetIntervalWhenTriggeredManually$ = manualTrigger$
  .do(() => lastUpdated = -1) // rest the last update to force an update
  .switchMapTo(intervalTrigger$)
  .filter(() => return +new Date() - lastUpdated >= thirtyMinutes) // only propagate dispatches if time elapsed is 30minutes
  .do(() => lastUpdate = +new Date());

resetIntervalWhenTriggeredManually$
  .flatMap(makeRestCall); // here you insert your rest-call
  .subscribe(
      data => console.log("Data is:", data),
      error => console.error("Error: " + error)
  );

你必须将它放在一个服务中，否则如果视图是销毁。

And you will have to place this in a service, otherwise the state would be lost if the view is destroyed.

这篇关于使用Ionic 2 / Angular 2更新列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！