कोणीय 2 एकाधिक उलटी गिनती पाइप

Question

मैं कोणीय 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

मैं your're एक 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; 
    } 
} 

आप कर सकते हैं इनपुट बार जब आप यूनिक्स टाइमस्टैम्प के रूप में गिनती करने के लिए और यह भी एक प्रारूप है जिसमें उलटी गिनती प्रदर्शित किया जाना चाहिए परिभाषित करना चाहते हैं।

उपरोक्त घटक का उपयोग कर example यहां है।