Angular 2 多个倒计时管道

Question

我想创建 angular 2/4 倒计时管道。

我当然可以单独进行倒计时，但是如何创建多个倒计时？

我想要以下输入：

<span [time]="unix timestamp here">Countdown will count here</span>

例如：

<span [time]="1500503492">Countdown will count here</span>
<span [time]="15005034392">Countdown will count here</span>
<span [time]="1500503492">Countdown will count here</span>

我怎样才能实现无论我有多少都可以正常工作？

到目前为止我尝试的只是像下面这样的单个倒计时：

time = 30;
setInterval(() => {
  this.currentTime = new Date().getTime();
  if (this.time > 0) {
    this.time = this.time - 1;
  }
}, 1000);

{{ time}}

Answer 1

我认为您正在寻找 Component 而不是 Pipe 或 Directive。

这个组件应该做你想做的事：

import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy } from '@angular/core';

@Component({
  selector: 'ngx-countdown',
  template: '{{ displayTime }}',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CountdownComponent implements OnDestroy {
  private _time: number;
  private _timing: number = 1000;
  private _interval;

  @Input()
  public set time(value: string | number) {
    this._time = parseInt(value as string, 10);
    this._startTimer();
  }

  @Input()
  public set timing(value: string | number) {
    this._timing = parseInt(value as string, 10);
    this._startTimer();
  }

  @Input()
  public format: string = '{dd} days {hh} hours {mm} minutes {ss} seconds';

  public get delta() {
    let date = new Date();
    return Math.max(0, Math.floor((this._time - date.getTime()) / 1000));
  }

  public get displayTime() {
    let days, hours, minutes, seconds, delta = this.delta, time = this.format;

    days = Math.floor(delta / 86400);
    delta -= days * 86400;
    hours = Math.floor(delta  / 3600) % 24;
    delta -= hours * 3600;
    minutes = Math.floor(delta  / 60) % 60;
    delta -= minutes * 60;
    seconds = delta % 60;

    time = time.replace('{dd}', days);
    time = time.replace('{hh}', hours);
    time = time.replace('{mm}', minutes);
    time = time.replace('{ss}', seconds);

    return time;
  }

  constructor(private _changeDetector: ChangeDetectorRef) { }

  ngOnDestroy() {
    this._stopTimer();
  }

  private _startTimer() {
    if(this.delta <= 0) return;
    this._stopTimer();
    this._interval = setInterval(() => {
      this._changeDetector.detectChanges();
      if(this.delta <= 0) {
        this._stopTimer();
      }
    }, this._timing);
  }

  private _stopTimer() {
    clearInterval(this._interval);
    this._interval = undefined;
  }
}

您可以输入要计数的时间作为 unix 时间戳，还可以定义倒计时的显示格式。

这是使用上述组件的 example。

Angular 2 多个倒计时管道

Angular 2 multiple countdown pipe

javascript

angular

countdown

angular2-directives

countdownlatch