Angular2：创建和销毁计时器

Question

我正在尝试创建计时器，它将每 5 秒发送一次 GET 请求，我设法做到了，但我注意到如果我移动到不同的页面（路由），计时器仍然运行，所以我尝试添加 ngOnDestroy，但我没有 "unsubscribe" 方法

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"

Answer 1

正在订阅一个可观察对象returns一个订阅对象

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

    }
}

Answer 2

只是你需要退订

ngOnDestroy() {
    this.myObservable.unsubscribe();
}

其中myObservable是subscribe()返回的对象。

参考：

Answer 3

在我的例子中，当我访问另一个页面时它停止了，但是当我回到这个页面时，2 个计时器开始，就像上面评论中的@user3145373 所说的那样。

所以解决方案是在 ngOnDestroy 中使值 timer 为空：

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();
        this.timer = null

    }
}

Angular2：创建和销毁计时器

Angular2: create and destroy timer

observable

angular