Compte à Rebours du temps dans angulaire 2

Fait quelques changements à Johnnyfittizio de réponse. https://stackoverflow.com/a/40784539/4579897

import {Observable} from 'rxjs/Rx';
import {Component, OnInit} from '@angular/core';
export class TimerComponent implements OnInit {
private _trialEndsAt;
private _diff: number;
private _days: number;
private _hours: number;
private _minutes: number;
private _seconds: number;
constructor() {}
ngOnInit() {  
this._trialEndsAt = "2017-02-28";
Observable.interval(1000).map((x) => {
this._diff = Date.parse(this._trialEndsAt) - Date.parse(new Date().toString());
}).subscribe((x) => {           
this._days = this.getDays(this._diff);
this._hours = this.getHours(this._diff);
this._minutes = this.getMinutes(this._diff);
this._seconds = this.getSeconds(this._diff);
});
}
getDays(t){
return Math.floor( t/(1000*60*60*24) );
}
getHours(t){
return Math.floor( (t/(1000*60*60)) % 24 );
}
getMinutes(t){
return Math.floor( (t/1000/60) % 60 );
}
getSeconds(t){
return Math.floor( (t/1000) % 60 );
}
}

OriginalL'auteur Adam Winnipass

J'ai pensé qu'il ne fait plus de sens pour créer la minuterie comme un Service, de sorte que je peux avoir plus de flexibilité lors de la création de mon point de vue (utiliser le Temps renvoyé modèle comme vous le souhaitez dans vos composants). Il crée un nouveau observable lors de la souscription de sorte que chaque abonné dispose de son propre observables. En bref, vous pouvez créer autant de minuteurs dans le même temps, avec ce service comme vous le souhaitez. Assurez-vous d'inclure ce service dans votre AppModule du fournisseur de la matrice de sorte que vous pouvez l'utiliser dans votre application.

Service:

import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/defer';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/map';
export interface Time {
days: number;
hours: number;
minutes: number;
seconds: number;
}
@Injectable()
export class TimerService {
constructor() { }
private createTimeObject(date: Date): Time {
const now = new Date().getTime();
const distance = date.getTime() - now;
let time: Time = {days: 0, hours: 0, minutes: 0, seconds: 0};
time.days = Math.floor(distance / (1000 * 60 * 60 * 24));
time.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
time.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
time.seconds = Math.floor((distance % (1000 * 60)) / 1000);
return time;
}
timer(date: Date): Observable<Time> {
return Observable.interval(1000)
.map(() => this.createTimeObject(date))
}
}

Maintenant l'utiliser dans un Composant:

import {Component, OnInit} from '@angular/core';
import {Time, TimerService} from '../timer.service';
@Component({
selector: 'app-timer',
template: `
<ng-container *ngIf="time1$ | async as time1"
<pre>{{time1.days}}days {{time1.hours}}hours {{time1.minutes}} minutes {{time1.seconds}}seconds<pre>
<br>
<ng-container>
<ng-container *ngIf="time2$ | async as time2"
<pre>{{time2.days}}days {{time2.hours}}hours {{time2.minutes}} minutes {{time2.seconds}}seconds<pre>
<br>
<ng-container>
`
})
export class TimerComponent implements OnInit {
time1$: Observable<Time>;
time2$: Observable<Time>;
constructor(private timerService: TimerService) {}
ngOnInit() {
this.time1$ = this.timerService.timer(new Date('June 4, 2020 15:37:25'))
this.time2$ = this.timerService.timer(new Date('August 9, 2041 15:37:25'))
}

OriginalL'auteur tommyc38

Voici une solution je suis venu récemment sur mon projet. Il vérifie entre une ouverture de la porte le temps d'un événement et l'événement principal le temps d'un même événement. Il utilise Momentjs.

J'ai le code dans le onChanges fonction dans le cas où un événement de temps des changements dans ma firebase qui est très peu probable, mais j'aime le fait qu'il peut ramasser sur elle et la mise à jour à la volée.

Composant:

import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { Observable } from "rxjs/Rx"
import { RoundService } from '../../round.service'
import * as moment from 'moment-timezone';
@Component({
selector: 'race-countdown',
templateUrl: './race-countdown.component.html',
styleUrls: ['./race-countdown.component.scss']
})
export class RaceCountdownComponent implements OnChanges,OnInit{
@Input() activeRound;
public time:number;
public timeToGates:number;
public timeToMains:number;  
public countDown:Observable<any>;
public currentUnix = moment().unix();
constructor(private rs:RoundService) { }
ngOnChanges() {
this.timeToGates = this.activeRound.gateOpenUnix - this.currentUnix;
this.timeToMains = this.activeRound.mainEventUnix - this.currentUnix;
if(this.timeToGates < 0)
this.time = this.timeToMains
else 
this.time = this.timeToGates
}
ngOnInit() {
this.countDown = Observable.interval(1000)
.map(res=>{ return this.time = this.time-1 })
.map(res=> {
let timeLeft = moment.duration(res, 'seconds');
let string:string = '';
//Days.
if(timeLeft.days() > 0) 
string += timeLeft.days() + ' Days'
//Hours.
if(timeLeft.hours() > 0) 
string += ' ' + timeLeft.hours() + ' Hours'
//Minutes.
if(timeLeft.minutes() > 0)
string += ' ' + timeLeft.minutes() + ' Mins'
//Seconds.
string += ' ' + timeLeft.seconds(); 
return string;
})
}
}

HTML:

<span>{{countDown | async}}</span>

Produit:
'2 Jours, 6 Heures et 59 Minutes 42' etc

OriginalL'auteur Ryann Galea