This article has not been translated, hope that your can PR to translated it. Help us!

count-down 倒计时

倒计时组件，依赖 ngx-countdown。

依赖

yarn add ngx-countdown

import { CountDownModule } from '@delon/abc/count-down';

代码演示

基本

简单的倒计时组件使用。

import { Component } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { CountdownEvent } from 'ngx-countdown';
@Component({
  selector: 'components-count-down-simple',
  template: `
    <div>
      <count-down #cd [target]="10" (event)="handleEvent($event)" style="font-size: 20px;"></count-down>
    </div>
    <button nz-button (click)="cd.instance.pause()">Pause</button>
    <button nz-button (click)="cd.instance.resume()">Resume</button>
  `,
})
export class ComponentsCountDownSimpleComponent {
  constructor(private msg: NzMessageService) {}
  handleEvent(e: CountdownEvent) {
    if (e.action === 'done') {
      this.msg.success('finised');
    }
  }
}

精度

0.1s精度使用方式。

import { Component } from '@angular/core';
import { CountdownConfig } from 'ngx-countdown';
@Component({
  selector: 'components-count-down-accuracy',
  template: `
    <count-down [config]="config"></count-down>
  `,
})
export class ComponentsCountDownAccuracyComponent {
  config: CountdownConfig = {
    format: `s.S`,
    leftTime: 30,
  };
}

API

count-down