javascript - ejemplos - angularjs tutorial

Cómo crear temporizador en angular2

Question

Necesito un temporizador en Angular 2, que marca después de un intervalo de tiempo y realiza alguna tarea (se pueden llamar algunas funciones).

¿Cómo hacer esto con Angular 2?

Answer 1

Además de todas las respuestas anteriores, lo haría usando RxJS Observables

por favor revise Observable.timer

Aquí hay un código de muestra, comenzará después de 2 segundos y luego marcará cada segundo:

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

Y aquí hay un plunker trabaja

Actualización Si desea llamar a una función declarada en la clase AppComponent, puede realizar una de las siguientes acciones:

** Suponiendo que la función que desea llamar se llama func ,

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

El problema con el enfoque anterior es que si llama ''this'' dentro de func, se referirá al objeto de suscriptor en lugar del objeto AppComponent que probablemente no sea lo que desea.

Sin embargo, en el siguiente enfoque, crea una expresión lambda y llama a la función func dentro de ella. De esta forma, la llamada a func todavía está dentro del alcance de AppComponent. Esta es la mejor manera de hacerlo en mi opinión.

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

revise este plunker para el código de trabajo.

Answer 2

Con rxjs 6.2.2 y Angular 6.1.7, recibí el error "Observable.timer no es una función".

Esto se resolvió reemplazando "Observable.timer" por "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();    
}

Answer 3

Encontré un paquete npm que lo hace fácil con RxJS como servicio.

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

Puede ''suscribirse'' a un temporizador existente para no crear miles de millones de temporizadores si lo usa muchas veces en el mismo componente.

Answer 4

Me enfrenté a un problema que tenía que usar un temporizador, pero tenía que mostrarlos en 2 componentes al mismo tiempo, la misma pantalla. Creé el timerObservable en un servicio. Me suscribí al temporizador en ambos componentes, ¿y qué pasó? No se sincronizará, porque la nueva suscripción siempre crea su propia transmisión.

Lo que me gustaría decir es que si planea usar un temporizador en varios lugares, siempre coloque .publishReplay(1).refCount() al final del Observador, porque publicará la misma transmisión cada vez. .

Ejemplo:

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

Answer 5

Si busca ejecutar un método en ngOnInit, podría hacer algo como esto:

importe estas 2 bibliotecas de RXJS:

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

Luego declare el temporizador y la suscripción privada, por ejemplo:

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

Último pero no menos importante método de ejecución cuando el temporizador se detiene

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

Eso es todo, Angular 5

Answer 6

Simplemente puede usar la utilidad setInterval y usar la función de flecha como devolución de llamada para que this apunte a la instancia del componente.

Por ej .:

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

Dentro de su gancho de ciclo de vida ngOnDestroy, borre el intervalo.

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

Answer 7

Otra solución es usar TimerObservable

TimerObservable es una subclase 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();
  }
}

PD: No te olvides de darte de baja.

Answer 8

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

    }


}

Answer 9

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