Góc 2 ống đếm ngược

Question

Tôi đang tìm cách tạo ống đếm ngược 2/4 góc cạnh.

Tất nhiên tôi có thể thực hiện đếm ngược riêng lẻ, nhưng làm cách nào để tạo nhiều bộ đếm?

Tôi muốn đầu vào sau:

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

ví dụ:

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

Làm thế nào tôi có thể đạt được điều đó tất cả sẽ làm việc dù có bao nhiêu tôi có?

gì tôi đã cố gắng cho đến nay chỉ đếm ngược đơn như sau:

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

{{ time}} 

Answer 1

Tôi nghĩ your're tìm kiếm một Component không phải là một Pipe hoặc Directive.

Thành phần này nên làm những gì bạn muốn:

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

Bạn có thể nhập thời gian bạn muốn đếm là unix timestamp và cũng xác định một định dạng trong đó đếm ngược sẽ được hiển thị.

Đây là số example sử dụng thành phần trên.