倒计时
IMPORT MODULE

倒计时组件,依赖 ngx-countdown

依赖

npm i -S ngx-countdown

代码演示

00:00:09
基本

简单的倒计时组件使用。

expand code expand code
import { Component, inject } from '@angular/core';

import { CountdownEvent } from 'ngx-countdown';

import { CountDownComponent } from '@yelon/abc/count-down';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'components-count-down-simple',
  template: `
    <div>
      <count-down #cd [target]="10" (event)="handleEvent($event)" style="font-size: 20px;" />
    </div>
    <button nz-button (click)="cd.instance.pause()">Pause</button>
    <button nz-button (click)="cd.instance.resume()">Resume</button>
  `,
  standalone: true,
  imports: [CountDownComponent, NzButtonModule]
})
export class ComponentsCountDownSimpleComponent {
  private readonly msg = inject(NzMessageService);

  handleEvent(e: CountdownEvent): void {
    if (e.action === 'done') {
      this.msg.success('finised');
    }
  }
}
29.8
精度

0.1s精度使用方式。

expand code expand code
import { Component } from '@angular/core';

import { CountdownConfig } from 'ngx-countdown';

import { CountDownComponent } from '@yelon/abc/count-down';

@Component({
  selector: 'components-count-down-accuracy',
  template: ` <count-down [config]="config" /> `,
  standalone: true,
  imports: [CountDownComponent]
})
export class ComponentsCountDownAccuracyComponent {
  config: CountdownConfig = {
    format: `s.S`,
    leftTime: 30
  };
}

API

count-down

成员说明类型默认值
[target]目标时间,number 表示秒number | Date-
[config]完整 Config 参数CountdownConfig-
(event)事件通知EventEmitter<CountdownEvent>-
Loading...