$interval dans Angular 5

1. Service $interval dans AngularJS
2. Utiliser le temps statique et la méthode Take dans Angular 5

AngularJS $interval était un moyen d’exécuter une fonction à des intervalles de temps réguliers. Dans Angular 5, il existe une méthode statique de minuterie dans la bibliothèque RxJS qui peut être utilisée pour faire la même chose.

La méthode de minuterie statique prend deux arguments. Le premier est l’intervalle en millisecondes et le second est une fonction facultative appelée lorsque cet intervalle est écoulé.

L’opérateur de prise peut être utilisé pour annuler tous les temporisateurs en attente lorsqu’une séquence observable se termine. Discutons d’abord de la méthode $ intervalle en détail, puis nous passerons à la méthode static du timer et à l’opérateur take dans Angular.

Service $interval dans AngularJS

Le service $interval dans AngularJS fait la même chose que la méthode setInterval() en JavaScript. La variable $interval est un wrapper pour la méthode setInterval(), ce qui la rend simple à modifier, supprimer ou imiter à des fins de test.

La fonction setInterval exécute la fonction donnée de manière répétée à un intervalle en millisecondes tant qu’elle a été appelée au moins une fois.

Le premier appel à setInterval exécutera la fonction donnée immédiatement, puis toutes les millisecondes spécifiées jusqu’à ce que clearInterval soit exécuté sur l’objet d’intervalle lui-même.

Exemple:

let timer = setInterval(() => alert('start'), 1000);

// after 20 seconds

setTimeout(() => { clearInterval(timer); alert('stop'); }, 10000);

Utiliser le temps statique et la méthode Take dans Angular 5

Static Time est une nouvelle fonctionnalité d’Angular 5 qui permet aux développeurs de définir le fuseau horaire pour les données de leur application. Cela peut être fait au moment de l’exécution en passant une valeur pour le fuseau horaire au service Heure statique ou en le sélectionnant comme paramètre de configuration de l’application.

Cette fonctionnalité a été ajoutée pour permettre aux développeurs d’utiliser Angular 5 avec des données de différents fuseaux horaires sans convertir manuellement les chaînes de données. La méthode Take est une autre nouvelle fonctionnalité qui permet aux développeurs de spécifier combien de temps une opération particulière doit prendre avant d’être abandonnée si elle prend plus de temps.

Exemple de code :

import { Component, VERSION } from '@angular/core';
import { Observable, timer } from 'rxjs';
import { map, take } from 'rxjs/operators';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  counter$: Observable<number>;
  count = 5;
  ngOnInit() {
    this.counter$ = timer(0, 5000)
      .pipe(
        take(5),
        map(() => (this.count))
      );
    this.counter$.subscribe((c) => {
      console.log(c);
    }, () => {}, () => {
      console.log('Done', this.count);
    });
  }
}

Exécuter le code