角度应用中的计时器

【问题标题】：timers in angular application角度应用中的计时器
【发布时间】：2021-02-18 22:08:01
【问题描述】：

我正在开发一个角度应用程序。我想在我的应用程序中使用一个计时器，这样当我调用该计时器并传递一个动态时间值时，它应该会在此之后显示一个弹出窗口。

例如，如果我启动一个计时器并将 60 秒传递给它，它应该会在 60 秒后向我显示一个弹出窗口。我有弹出窗口的代码，只是不知道如何实现在运行时提供动态时间的计时器。此外，如果我在这 60 秒内从后端获得响应，或者我为计时器传递的动态值是什么，我还需要删除计时器。我该怎么做？

【问题讨论】：

你试过RXJS的定时器吗？
我使用npmjs.com/package/ng2-simple-timer 尝试过，但它无法正常工作。我对 RxJs 了解不多
RxJS 是 Angular 的核心，具有很多功能（例如 http 调用）。所以你不需要从 npm 导入它。看看定时器功能，它会做你想做的一切
我该怎么做？
你可以查看post

标签： angular angular7 angular8 angular9

【解决方案1】：

您可以使用rxjs timer 。首先导入定时器表单rxjs

import { Subscription, timer } from 'rxjs'

然后在你的组件中：

  public timer: Subscription;

  ngOnInit() {

  }

  showPopupAfterSpecificTime(time = 10000) {
    const numbers = timer(time);
    this.timer = numbers.subscribe(x => this.openPopup());
  }

  private openPopup() {
    console.log("Now You Can Open Your Modal")
  }

  ngOnDestroy(): void {
    if (this.timer) this.timer.unsubscribe()
  }

showPopupAfterSpecificTime 的默认值为 10 秒，您可以打发时间

在您的 HTML 中：这里我过了 5 秒

<button type="button" (click)="showPopupAfterSpecificTime(5000)">
  open Popup
</button>

注意：

为了防止内存泄漏，您必须在ngOnDestroy 中输入unsubscribe

Stackblitz Here

【讨论】：