ANGULAR:取消订阅 Timer Observable 后注入另一个函数

Posted

技术标签:

【中文标题】ANGULAR:取消订阅 Timer Observable 后注入另一个函数【英文标题】:ANGULAR: Inject Another Function after unsubscribing from Timer Observable 【发布时间】:2018-02-09 21:26:07 【问题描述】:

我正在创建一个考试应用程序,所以当时间到时,我需要一个视图控制器弹出来告诉用户他已经超出了他/她的时间并将他/她带到结果页面!

但是退订定时器后,我的函数进入了循环!!!

拜托,我需要这方面的帮助..

下面是我的代码!

minutesDisplay: number = 0;
hoursDisplay: number = 0;
secondsDisplay: number = 0;

sub: Subscription;

showAlert() 
    let alert = this.alertCtrl.create(

      subTitle: 'Ooops, Time Up! ',
    );
    alert.present();
    this.activity.openModal();
  

ngOnInit() 
    this.startTimer();


public ngOnDestroy() 
    if (this.minutesDisplay == 1)
        this.sub.unsubscribe();
    

    return true;



private startTimer() 
    let timer = Observable.timer(1, 1000);
    this.sub = timer.subscribe(
        t => 
            this.ticks = t;
            this.secondsDisplay = this.getSeconds(this.ticks);
            this.minutesDisplay = this.getMinutes(this.ticks);
            this.hoursDisplay = this.getHours(this.ticks);
            this.ngOnDestroy();
        
    ); 
    this.showAlert();
 

【问题讨论】:

你能设置一个plunker吗?你怎么看循环?提示一直显示? 是的,plunker 在这里会很有帮助。否则我们只是在猜测语法。 【参考方案1】:

我没有尝试这个...但您可以尝试以下方法:

public ngOnDestroy() 
    this.sub.unsubscribe();  // Stop the timer if the user navigates elsewhere


private startTimer() 
    let timer = Observable.timer(1, 1000);
    this.sub = timer.subscribe(
        t => 
            this.ticks = t;
            this.secondsDisplay = this.getSeconds(this.ticks);
            this.minutesDisplay = this.getMinutes(this.ticks);
            this.hoursDisplay = this.getHours(this.ticks);
            if (this.minutesDisplay == 1)
               this.sub.unsubscribe();  // Stop the timer when time is up.
               this.showAlert();        // Show the alert now
            
        
    ); 
 

【讨论】:

我也是这么想的:) @DeborahK 仍然返回相同的循环 您确实需要为我们提供一个 plunker 以更好地检查它是如何工作的。转到此站点:plnkr.co/edit/?p=catalogue 从绿色的大 New 按钮下拉列表并选择“Angular”。然后将您的代码添加到生成的文件中。如果您可以在那里证明问题......我们可以使用代码来解决它。 还有……this.minutesDisplay 会是 1 吗?你的getMinutes 方法是做什么的? plnkr.co/edit/qk2c9nr6dBn2jWeaVf8d?这就是代码的链接,你可以看到我的 getMINutes 函数做了什么!!!【参考方案2】:
Observable.timer(1, 1000)
  .map(t=>this.getMinutes(t) === 1) // Observable<tick> -> Observable<boolean>
  .first(istimeUp => istimeUp) // take first Observable<true>
  .subscribe(()=>this.showAlert())

【讨论】:

以上是关于ANGULAR:取消订阅 Timer Observable 后注入另一个函数的主要内容,如果未能解决你的问题,请参考以下文章

Angular HttpClient取消订阅[重复]

Angular 2 - 订阅 FormControl 的 valueChanges 是不是需要取消订阅?

angular中全局订阅事件,包含取消订阅,非常好用

Angular RxJS Observable:takeUntil 与使用订阅取消订阅 [关闭]

取消订阅 Angular 中的 observable

我应该取消订阅根 Angular 组件中的 observables 吗?