Преобразовать строку даты UTC в число для значения конфигурации ngx-countdown leftTime

Согласно документации ngx-countdown, параметр leftTime должен быть числом.

Поэтому, если вы преобразуете childTimer в число, создав экземпляр переменной конфигурации, он должен работать правильно.

ngx-countdown ожидает, что leftTime будет числом, обозначающим оставшиеся секунды. Итак, чтобы это заработало, вам нужно найти разницу между auctionEnd, которая является строкой UTC, и текущей датой, и преобразовать ее в секунды.

Вот как ваш компонент может это сделать:

export class TimerComponent {

 config: CountdownConfig = {
   leftTime: 0, 
   format: 'd:H:M:ss'
 };

 // Turn this into a setter so it updates the config if input changes
 // make sure you use ChangeDetectionStrategy.OnPush to avoid redundant updates
 // or change this as you wish
 @Input() set childTimer(utcDate: string) {
   this.config = {
     ...this.config,
     leftTime: this.calculateSecondsLeft(utcDate)
   };
 }

 private calculateSecondsLeft(utcDate: string): number {
   // Both `parse` and `now` return a timestamp
   const diff = Date.parse(utcDate) - Date.now();
   return diff / 1000;
 }

}

Обновлять

Я покопался в документации ngx-countdown и в конфигурации есть опция stopTime, которая делает ее еще проще, поскольку она принимает «время окончания» в качестве отметки времени, поэтому пример можно упростить до:

export class TimerComponent {

 config: CountdownConfig = {
   format: 'd:H:M:ss'
 };

 @Input() set childTimer(utcDate: string) {
   this.config = {
     ...this.config,
     stopTime: Date.parse(utcDate)
   };
 }

}

Что касается d в формате, показывающем 1, когда timeLeft > 24 часов. Кажется, библиотека использует форматирование даты, а данные больше похожи на Duration. Когда вычисляется diff, это дата относительно Jan 1 1970, а d — это «день месяца», поэтому отображается 1. Лучше объяснить здесь. Поскольку мы не можем вычесть 1 день из Jan 1 1970, нет простого решения, которое могло бы обрабатывать високосные дни и другие крайние случаи, связанные с датой.

Вот пример того, как вы можете добавить собственный форматтер через конфигурацию formatDate и intervalToDuration из библиотеки date-fns:

config: CountdownConfig = {
  formatDate: ({ date }) => {
    const { days, hours, minutes, seconds } = intervalToDuration({
      start: 0,
      end: date
    });
    return `${days ?? 0}:${hours ?? 0}:${minutes ?? 0}:${seconds ?? 0}`;
  },
};