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

Posted 2023-03-13

【中文标题】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())