Açısal 2 çoklu geri sayım borusu

Question

Açısal 2/4 geri sayım borusu oluşturmaya çalışıyorum.

Elbette bireysel geri sayım yapabilirim, ancak birden çok tane nasıl oluşturabilirim? örneğin

<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> 

nasıl bütün olursa olsun kaç tane çalışacağına dair elde edebilirsiniz

Aşağıdaki girişi istiyorsun? Şu ana kadar çalıştığım şey

aşağıdaki gibi sadece tek geri sayımlar: Ben İlgilendiğiniz bir Component değil Pipe veya Directive arayan düşünüyorum

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

{{ time}} 

Answer 1

.

Bu bileşen istediğini yapmalıdır:

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; 
    } 
} 

girişi yapabilirsiniz Eğer Unix zaman damgası olarak saymak ve ayrıca geri sayım gösterilmesi gereken bir biçim tanımlamak istediğiniz zaman.

Yukarıdaki bileşen kullanılarak bir example verilmiştir.