如何銷燬/停止可觀察間隔

Question

我有一個倒數計時器，在用戶離開頁面後繼續運行。當用戶離開頁面時，我想銷燬倒計時器從運行或停止它。我怎樣才能做到這一點？

countdown.ts

public time: number; 
public countDown:Observable<any>; 
public currentUnix; 

constructor() { 
    this.currentUnix = moment().unix(); 
    this.time = moment(1503773977000).unix() - this.currentUnix; 
} 


ngOnInit() { 
    this.countDown = Observable.interval(1000) 
     .map(res => { 
     return this.time = this.time - 1 
     }) 
     .map(res => { 

     let timeLeft = moment.duration(res, 'seconds'); 
     let string: string = ''; 

     // Days. 
     if (timeLeft.days() > 0) 
      string += timeLeft.days() + ' Days'; 

     // Hours. 
     if (timeLeft.hours() > 0) 
      string += ' ' + timeLeft.hours() + ' Hours'; 

     // Minutes. 
     if (timeLeft.minutes() > 0) 
      string += ' ' + timeLeft.minutes() + ' Mins'; 

     // Seconds. 
     string += ' ' + timeLeft.seconds(); 
     console.log("string", string); 
     return string; 
     }) 
} 

Answer 1

您可以使用takeUntil運算符。

import { Subject } from 'rxjs/Subject'; 
import 'rxjs/add/operator/takeUntil'; 

... 

private onDestroy$ = new Subject<void>(); 

ngOnDestroy(): void { 
    this.onDestroy$.next(); 
} 

ngOnInit() { 
    this.countDown = Observable.interval(1000) 
           .takeUntil(this.onDestroy$) // <---- 
           .map(
... 

Answer 2

您必須已創建基於您this.countDown一個subscrtiption，您可以在ngOnDestroy摧毀它，

摘自documentation，

認沽清理邏輯ngOnDestroy（），必須在 之前運行的邏輯破壞指令。

.... 
this.subscription = this.countDown.subscribe(...) 
... 

public ngOnDestroy() { 
    this.subscription.unsubscribe(); 
} 

希望這有助於！