web-dev-qa-db-ja.com

Angular2：タイマーの作成と破棄

5秒ごとにGETリクエストを送信するタイマーを作成しようとしていますが、なんとかやっていますが、別のページ（ルーティング）に移動すると、タイマーはまだ実行中なので、ngOnDestroyを追加しようとしましたが、そうではありません。 「購読解除」メソッドがない

import {Component, OnInit, OnDestroy} from '@angular/core';
import {Observable} from 'rxjs/Rx';

@Component({
  templateUrl: 'app/pages/CurrentRuns/currentruns.component.html'
})




export class CurrentRunsComponent implements OnInit, OnDestroy {
  private timer;
   ticks=0;
    

  ngOnInit() {
    this.timer = Observable.timer(2000,5000);
    this.timer.subscribe(t => this.tickerFunc(t));
  }
    tickerFunc(tick){
    console.log(this);
    this.ticks = tick
  }

   ngOnDestroy(){
    console.log("Destroy timer");

  }
}

Angular2 RC7、「rxjs」を使用しています：「5.0.0-beta.12」

angularobservable
9
Shay Binyat

オブザーバブルをサブスクライブすると、サブスクリプションオブジェクトが返されます

import {Component, OnInit, OnDestroy} from '@angular/core';
import { Observable, Subscription } from 'rxjs/Rx';

@Component({
    templateUrl: 'app/pages/CurrentRuns/currentruns.component.html'
})
export class CurrentRunsComponent implements OnInit, OnDestroy {
    ticks = 0;
    private timer;
    // Subscription object
    private sub: Subscription;

    ngOnInit() {
        this.timer = Observable.timer(2000,5000);
        // subscribing to a observable returns a subscription object
        this.sub = this.timer.subscribe(t => this.tickerFunc(t));
    }
    tickerFunc(tick){
        console.log(this);
        this.ticks = tick
    }

    ngOnDestroy(){
        console.log("Destroy timer");
        // unsubscribe here
        this.sub.unsubscribe();

    }
}
22
Luiz

単にあなたが退会する必要があります

_ngOnDestroy() {
    this.myObservable.unsubscribe();
}
_

ここで、myObservableはsubscribe()によって返されるオブジェクトです。

refrence： angular2-パスが変更されたときに観測可能な間隔を終了する最良の方法

0
shan kulkarni