web-dev-qa-db-fra.com

Comment faire une minuterie dans Angular 5

J'utilise Angular 5.

Je veux savoir comment puis-je démarrer le chronométrage lorsqu'un bouton de lecture est enfoncé, afin de savoir combien de temps s'est écoulé depuis mon clic.

J'aimerais aussi savoir s'il est possible d'arrêter le chronomètre et de pouvoir continuer avec le même temps auparavant.

J'ai enfin résolu ma question avec la réponse de Pardeep Jain. Bien que ce ne soit pas exactement ce que je cherchais… Je ne voulais pas de compte à rebours, je voulais compter la durée. Voici le code que j'ai utilisé à la fin:

time: number = 0;
interval;

startTimer() {
  this.play = true;
  this.interval = setInterval(() => {
    this.time++;
  },1000)
}

pauseTimer() {
  this.play = false;
  clearInterval(this.interval);
}
angulartypescripttimerangular5
4
Samuel

Vous pouvez simplement utiliser setInterval pour créer un tel minuteur dans Angular. Utilisez ce code pour minuteur -

timeLeft: number = 60;
  interval;

startTimer() {
    this.interval = setInterval(() => {
      if(this.timeLeft > 0) {
        this.timeLeft--;
      } else {
        this.timeLeft = 60;
      }
    },1000)
  }

  pauseTimer() {
    clearInterval(this.interval);
  }

<button (click)='startTimer()'>Start Timer</button>
<button (click)='pauseTimer()'>Pause</button>

<p>{{timeLeft}} Seconds Left....</p>

Exemple de travail

Une autre façon d'utiliser Observable timer comme ci-dessous -

import { timer } from 'rxjs';

oberserableTimer() {
    const source = timer(1000, 2000);
    const abc = source.subscribe(val => {
      console.log(val, '-');
      this.subscribeTimer = this.timeLeft - val;
    });
  }

<p (click)="oberserableTimer()">Start Observable timer</p> {{subscribeTimer}}

Exemple de travail

Pour plus d'informations lire ici

16
Pardeep Jain

Cela peut sembler excessif pour ce que vous recherchez, mais vous pouvez utiliser un package npm appelé marky pour le faire. Il vous offre quelques fonctionnalités supplémentaires qui vont bien au-delà du démarrage et de l'arrêt d'une minuterie . Il vous suffit de l'installer via npm, puis d'importer la dépendance où vous le souhaitez npm package: https://www.npmjs.com/package/marky

Un exemple d'utilisation après l'installation via npm serait le suivant:

import * as _M from 'marky';

@Component({
 selector: 'app-test',
 templateUrl: './test.component.html',
 styleUrls: ['./test.component.scss']
})

export class TestComponent implements OnInit {
 Marky = _M;
}

constructor() {}

ngOnInit() {}

startTimer(key: string) {
 this.Marky.mark(key);
}

stopTimer(key: string) {
 this.Marky.stop(key);
}

key est simplement une chaîne que vous établissez pour identifier cette mesure de temps particulière. Vous pouvez avoir plusieurs mesures que vous pouvez revenir en arrière et référencer vos statistiques de minuterie en utilisant les clés que vous créez.

0
bitW0lf