$intervalo en Angular 5

1. Servicio $intervalo en AngularJS
2. Use el tiempo estático y el método Take en Angular 5

AngularJS $interval era una forma de ejecutar una función en intervalos de tiempo regulares. En Angular 5, hay un método estático de temporizador en la biblioteca RxJS que se puede usar para hacer lo mismo.

El método de temporizador estático toma dos argumentos. El primero es el intervalo en milisegundos, y el segundo es una función opcional llamada cuando transcurre este intervalo.

El operador de toma se puede usar para cancelar cualquier temporizador pendiente cuando se completa una secuencia observable. Primero analicemos el método $interval en detalle y luego pasaremos al método estático del temporizador y al take operator en Angular.

Servicio $intervalo en AngularJS

El servicio $interval en AngularJS hace lo mismo que el método setInterval() en JavaScript. La variable $interval es un envoltorio para el método setInterval(), por lo que es fácil de modificar, eliminar o imitar con fines de prueba.

La función setInterval ejecuta la función dada repetidamente en un intervalo de milisegundos siempre que haya sido llamada al menos una vez.

La primera llamada a setInterval ejecutará la función dada inmediatamente, y luego cada número especificado de milisegundos hasta que se ejecute clearInterval en el objeto de intervalo en sí.

Ejemplo:

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

// after 20 seconds

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

Use el tiempo estático y el método Take en Angular 5

Static Time es una nueva función en Angular 5 que permite a los desarrolladores establecer la zona horaria para los datos de su aplicación. Esto se puede hacer en tiempo de ejecución pasando un valor para la zona horaria al servicio Static Time o seleccionándolo como parámetro de configuración de la aplicación.

Esta característica se agregó para permitir que los desarrolladores usen Angular 5 con datos de diferentes zonas horarias sin convertir cadenas de datos manualmente. El método Take es otra característica nueva que permite a los desarrolladores especificar cuánto tiempo debe tomar una operación en particular antes de ser abortada si toma más tiempo.

Código de ejemplo:

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

Ejecutar código