如何在Angular 10中使用倒数计时器

问题描述

我正在尝试创建一个Angular-Nativescript共享应用程序，该应用程序在计时器达到零时执行某些功能。 我还希望计时器在更改结束值时重新启动/重置。

在Angular 9中，此功能可与angular-countdown-timer软件包一起使用。

但是，自从升级到Angular 10以来，我无法克服ModuleWithProviders方面的一些通用类型问题。

我也尝试过使用angular8-countdown-timer，它在页面加载时设置了最终值时才起作用，但此后却没有（即使组件中的最终值正在改变）。

我还尝试了一些较旧的软件包，例如ngx-countdown-timer，但由于它们普遍受到ModuleWithProviders限制的困扰，因此没有任何乐趣。

我已经尝试过使用ModuleWithProviders<any>和ModuleWithProviders<unkNown>，就像我在类似的帖子中所看到的那样，但是编译器只是在我的脸上大笑。

以上任何一种帮助，甚至与作者联系的方式，都将不胜感激。

解决方法

我不确定我是否能完全理解您的问题，但是我只是updated my own angular9 project使用了效率更高的计时器，在该计时器中我没有导入所有的rxjs。

我在页面上使用了几个计数器并进行服务器重置。

基本上，当我启动计时器时，我会生成一个新的计时器，并在间隔过去后开始工作，然后在单击停止按钮时停止订阅。为了做您想做的事，我猜您只是从“做事”块内部调用.unsubscribe()函数。

我希望这对您或其他来这里以8-10角计时的人有帮助

import { Subscription,timer } from 'rxjs';

...
  subscription: Subscription;


  startTimer(){
    const source = timer(1000,2000);
    this.subscription = source.subscribe(val => {
       // do stuff you want when the interval ticks
    }
  }

  stopTimer(){
    this.subscription.unsubscribe();
  }

我的灵感来自this article。