如何让 ngx-countdown 等待开始 - Html

如果您正在开发一个需要倒计时功能的网站或应用程序，您可能会用到 ngx-countdown 这个 Angular 库。但是，这个库默认是立即启动倒计时的，如果您需要在一定的时间或事件后才开始倒计时，那么就需要进行一些额外的设定了。

以下是如何让 ngx-countdown 等待开始的示例代码：

示例代码

在模板中加入以下 HTML 代码：

<ngx-countdown [(config)]="config"></ngx-countdown>

在组件中加入以下 TypeScript 代码：

import { Component } from "@angular/core";
import { CountdownConfig, CountdownEvent } from "ngx-countdown";
import { Observable, timer } from "rxjs";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  config: CountdownConfig = {
    leftTime: 0, // 倒计时时间，0 表示不启动倒计时
    notify: new Observable((observer) => {
      // 倒计时事件
      observer.next(1);
      observer.complete();
    })
  };

  startCountdown() {
    const delay = 5000; // 等待时间，单位毫秒
    this.config.leftTime = delay; // 将 leftTime 设定为等待时间
    timer(delay).subscribe((val) => {
      // 等待时间结束后启动倒计时
      const endTime = new Date().getTime() + 5000; // 设定结束时间，举例是 5 秒后
      this.config.leftTime = endTime - new Date().getTime();
    });
  }
}

代码解释

首先，在模板中用标签引入了 ngx-countdown，同时将其配置绑定到了 config 变量上。

在组件中，我们定义了 config 变量，包含了倒计时的配置，其中 the leftTime 用来控制倒计时的时间，但是我们需要等待一定时间或事件后才启动倒计时，所以这里先将 leftTime 设定为0。

notify 是一个 Observable，代表了每次倒计时都会触发的事件，这里简单设置为只触发一次。

在 startCountdown() 函数中，我们设定了等待时间和 setTimeout() 函数类似的操作。在等待时间结束后，我们将 leftTime 设定为实际的倒计时时间，即当前时间加上倒计时的时间间隔。

这样我们就完成了一个等待一定时间后启动倒计时的示例代码。具体实现可能需要根据个人需求进行修改。