は、私は、私は2つの方法で私のコンポーネントのリストを更新するアンギュラ2.</p> <p>を使用してイオン2で開発されたアプリケーションを持っている2

Question

角度/イオン2で更新リストを保管してください。

1. 自動更新 - 更新がない場合、または最後の更新が30分以上前に だった場合は更新します。
2. 手動 - 次回の更新まで待つ必要がない場合は、いつでも手動で更新できます。

ユーザーがページを離れると自動リフレッシュがキャンセルされ、彼が戻ってきたときに再び初期化されます。ユーザーがページに入ったときにすぐに更新するのではなく、最後の更新から30分が経過したときにのみ更新します。

これを達成するにはどうすればよいでしょうか？アップデートが矛盾するのではないかと思っています。もしそうならば、すべてをキャンセルして最後の呼び出しでしか進めないのですか？

私はAngular 2を初めて使っています。Observablesとちょっと混乱しています。ここで私が持っているものです。

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(); 
    } 

} 

Answer 1

あなたはこのようなものを使用してこれを解決することができます：

// 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

---

ユーザーがページを退出/入力したときに自動的に更新を停止/継続したい部分は、純粋なrxjで行うことはできません。最後の更新とchecのどこかに日付を保存する必要がありますkが小さな期間です：

// 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) 
); 

そして、あなたは、ビューが破壊された場合にそうでない状態が失われてしまう、サービスでこれを配置する必要があります。