web-dev-qa-db-fra.com

Comment créer une minuterie dans angular2

J'ai besoin d'une minuterie en angulaire 2, qui coche après un intervalle de temps et faire une tâche (peut être appeler certaines fonctions).

Comment faire cela avec Angular 2?

javascriptangular
86
kuntal

En plus de toutes les réponses précédentes, je le ferais avec RxJS Observables

s'il vous plaît vérifier Observable.timer

Voici un exemple de code, qui démarrera après 2 secondes, puis coche toutes les secondes:

import {Component} from 'angular2/core';
import {Observable} from 'rxjs/Rx';

@Component({
    selector: 'my-app',
    template: 'Ticks (every second) : {{ticks}}'
})
export class AppComponent {
  ticks =0;
  ngOnInit(){
    let timer = Observable.timer(2000,1000);
    timer.subscribe(t=>this.ticks = t);
  }
}

Et voici un travail plunker

Update Si vous souhaitez appeler une fonction déclarée sur la classe AppComponent, vous pouvez effectuer l'une des opérations suivantes: 

** En supposant que la fonction que vous voulez appeler s'appelle func,

ngOnInit(){
    let timer = Observable.timer(2000,1000);
    timer.subscribe(this.func);
}

Le problème avec l'approche ci-dessus est que si vous appelez 'this' in func, il fera référence à l'objet abonné au lieu de l'objet AppComponent, qui n'est probablement pas ce que vous voulez.

Cependant, dans l'approche ci-dessous, vous créez une expression lambda et appelez la fonction func à l'intérieur. Ainsi, l'appel à func est toujours dans la portée d'AppComponent. C’est la meilleure façon de le faire à mon avis. 

ngOnInit(){
    let timer = Observable.timer(2000,1000);
    timer.subscribe(t=> {
        this.func(t);
    });
}

vérifiez ce lecteur pour le code de travail.

127
Abdulrahman

Une autre solution consiste à utiliser TimerObservable

TimerObservable est une sous-classe de Observable.

import {Component, OnInit, OnDestroy} from '@angular/core';
import {Subscription} from "rxjs";
import {TimerObservable} from "rxjs/observable/TimerObservable";

@Component({
  selector: 'app-component',
  template: '{{tick}}',
})
export class Component implements OnInit, OnDestroy {

  private tick: string;
  private subscription: Subscription;

  constructor() {
  }

  ngOnInit() {
    let timer = TimerObservable.create(2000, 1000);
    this.subscription = timer.subscribe(t => {
      this.tick = t;
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

P.S .: N'oubliez pas de vous désabonner.

77
Philip Miglinci
import {Component, View, OnInit, OnDestroy} from "angular2/core";

import { Observable, Subscription } from 'rxjs/Rx';

@Component({

})
export class NewContactComponent implements OnInit, OnDestroy {

    ticks = 0;
    private timer;
    // Subscription object
    private sub: Subscription;


    ngOnInit() {
        this.timer = Observable.timer(2000,5000);
        // subscribing to a observable returns a subscription object
        this.sub = this.timer.subscribe(t => this.tickerFunc(t));
    }
    tickerFunc(tick){
        console.log(this);
        this.ticks = tick
    }

    ngOnDestroy(){
        console.log("Destroy timer");
        // unsubscribe here
        this.sub.unsubscribe();

    }


}
11
Unnikrishnan Parameswaran

J'ai dû faire face à un problème d'utilisation d'une minuterie, mais je devais les afficher dans 2 composants en même temps, le même écran. J'ai créé le timerObservable dans un service. Je me suis abonné à la minuterie dans les deux composants et que s'est-il passé? Il ne sera pas synchronisé, car un nouvel abonnement crée toujours son propre flux.

Ce que je voudrais dire, c'est que si vous envisagez d'utiliser une minuterie à plusieurs endroits, mettez toujours .publishReplay(1).refCount() à la fin de Observer, car il publiera le même flux à chaque fois.

Exemple:

this.startDateTimer = Observable.combineLatest(this.timer, this.startDate$, (localTimer, startDate) => {
  return this.calculateTime(startDate);
}).publishReplay(1).refCount();
3
xyztdanid4

Vous pouvez simplement utiliser l'utilitaire setInterval et utiliser la fonction de flèche comme rappel pour que this pointe vers l'instance du composant.

Pour ex: 

this.interval = setInterval( () => { 
    // call your functions like 
    this.getList();
    this.updateInfo();
});

Dans votre hook de cycle de vie ngOnDestroy, effacez l'intervalle.

ngOnDestroy(){
    clearInterval(this.interval);
}
3
Shivang Gupta

Si vous cherchez à exécuter une méthode sur ngOnInit, vous pourriez faire quelque chose comme ceci:

importer ces 2 bibliothèques de RXJS:

import {Observable} from 'rxjs/Rx';
import {Subscription} from "rxjs";

Puis déclarer le timer et l'abonnement privé, exemple:

timer= Observable.timer(1000,1000); // 1 second for 2 seconds (2000,1000) etc
private subscription: Subscription;

Dernière mais pas la moindre méthode lorsque la minuterie s'arrête

ngOnInit() {
  this.subscription = this.timer.subscribe(ticks=> {
    this.populatecombobox();  //example calling a method that populates a combobox
    this.subscription.unsubscribe();  //you need to unsubscribe or it will run infinite times
  });
}

C'est tout, angulaire 5

1
Alexis Poo

Avec rxjs 6.2.2 et Angular 6.1.7, l’erreur "Observable.timer n’est pas une fonction". 

Ceci a été résolu en remplaçant "Observable.timer" par "timer":

import {timer} from 'rxjs';

....

private my_timer;    

ngOnInit(){    
    this.my_timer = timer(2000,1000);    
    this.my_timer.subscribe(t=> {    
    console.log("Tick");    
    });    
}    

ngOnDestroy() {    
    this.my_timer.unsubscribe();    
}
1
Matt Saunders

Nous avons trouvé un package npm qui facilite cela avec RxJS en tant que service.

https://www.npmjs.com/package/ng2-simple-timer

Vous pouvez vous «abonner» à un minuteur existant pour ne pas en créer autant si vous l'utilisez plusieurs fois dans le même composant.

1
Simon_Weaver
Set Timer and auto call service after certain time
// Initialize from ngInit
ngOnInit(): void {this.getNotifications();}

getNotifications() {
    setInterval(() => {this.getNewNotifications();
    }, 60000);  // 60000 milliseconds interval 
}
getNewNotifications() {
    this.notifyService.getNewNotifications().subscribe(
        data => { // call back },
        error => { },
    );
}
0
Nazmul Nadim