Comment créer une minuterie dans angular2

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

Comment faire cela avec Angular 2?

En plus de toutes les réponses précédentes, je le ferais en utilisant les observables RxJS

veuillez vérifier Observable.timer

Voici un exemple de code, démarrera après 2 secondes, puis cochera 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 plunker de travail

Mettre à jour 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 souhaitez 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' à l'intérieur de func, il se référera à l'objet abonné au lieu de l'objet AppComponent, ce 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. De cette façon, 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 plunker pour le code de travail.

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

PS: N'oubliez pas de vous désabonner.

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();

    }


}

Avec rxjs 6.2.2 et Angular 6.1.7, j'obtenais un:

Observable.timer is not a function

Erreur. Ce problème a été résolu en remplaçant Observable.timerpar timer:

import { timer, Subscription } from 'rxjs';

private myTimerSub: Subscription;    

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

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

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

Par exemple:

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

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

Ce que je voudrais dire, c'est que si vous prévoyez d'utiliser une minuterie à plusieurs endroits, toujours placée .publishReplay(1).refCount() à la fin de l'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();

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

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

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

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

importez ces 2 bibliothèques depuis RXJS:

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

Ensuite, déclarez le minuteur et l'abonnement privé, exemple:

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

Dernière mais non la moindre méthode d'exécution 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, Angular 5

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 => { },
    );
}