it-swarm.com.de

So erstellen Sie einen Timer in angle2

Ich brauche einen Timer in Winkel 2, der nach einem Zeitintervall tickt und einige Aufgaben ausführt (möglicherweise werden einige Funktionen aufgerufen).

Wie mache ich das mit Angular 2?

86
kuntal

Zusätzlich zu allen vorherigen Antworten würde ich RxJS Observables verwenden

bitte überprüfen Sie Observable.timer

Hier ist ein Beispielcode, der nach 2 Sekunden startet und dann jede Sekunde tickt:

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

Und hier ist ein funktionierender Plunker

Update Wenn Sie eine in der AppComponent-Klasse deklarierte Funktion aufrufen möchten, haben Sie folgende Möglichkeiten: 

** Angenommen, die Funktion, die Sie aufrufen möchten, heißt func,

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

Das Problem mit dem oben genannten Ansatz ist, dass wenn Sie 'this' in der Funktion aufrufen, es sich auf das Abonnentenobjekt bezieht und nicht auf das AppComponent-Objekt, das wahrscheinlich nicht das ist, was Sie möchten.

In der folgenden Vorgehensweise erstellen Sie jedoch einen Lambda-Ausdruck und rufen die Funktion func auf. Auf diese Weise befindet sich der Aufruf von func noch im Anwendungsbereich von AppComponent. Dies ist meiner Meinung nach der beste Weg. 

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

check dieser plunker für arbeitscode.

127
Abdulrahman

Eine andere Lösung ist die Verwendung von TimerObservable.

TimerObservable ist eine Unterklasse von 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 .: Vergessen Sie nicht, sich abzumelden.

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

    }


}

Ich hatte ein Problem, dass ich einen Timer verwenden musste, aber ich musste sie in 2 Komponenten gleichzeitig anzeigen, auf demselben Bildschirm. Ich habe die timerObservable in einem Dienst erstellt. Ich habe den Timer in beiden Komponenten abonniert, und was ist passiert? Es wird nicht synchronisiert, da ein neues Abonnement immer einen eigenen Stream erstellt.

Was ich sagen möchte, ist, dass, wenn Sie vorhaben, einen Timer an mehreren Stellen zu verwenden, immer .publishReplay(1).refCount()at das Ende des Observer setzen, da er jedes Mal denselben Stream aus ihm herausgibt.

Beispiel:

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

Sie können einfach das Dienstprogramm setInterval und die Pfeilfunktion als Rückruf verwenden, sodass this auf die Komponenteninstanz zeigt.

Für ex: 

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

Löschen Sie das Intervall in Ihrem ngOnDestroy-Lebenszyklus-Hook.

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

Wenn Sie versuchen, eine Methode für ngOnInit auszuführen, können Sie Folgendes tun:

importiere diese 2 Bibliotheken von RXJS:

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

Dann deklarieren Sie den Timer und das private Abonnement. Beispiel:

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

Last but not least Laufmethode, wenn der Timer stoppt

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

Das ist alles, Angular 5

1
Alexis Poo

Bei rxjs 6.2.2 und Angular 6.1.7 wurde der Fehler "Observable.timer ist keine Funktion" angezeigt. 

Dies wurde behoben, indem "Observable.timer" durch "Timer" ersetzt wurde:

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

Ich habe ein npm-Paket gefunden, das dies mit RxJS als Service einfach macht.

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

Sie können einen vorhandenen Timer "abonnieren", so dass Sie keine Bazillion-Timer erstellen, wenn Sie ihn oft in derselben Komponente verwenden.

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