Angular2'de zamanlayıcı nasıl oluşturulur

Angular 2'de bir zaman aralığından sonra çalışan ve bazı görevler yapan bir zamanlayıcıya ihtiyacım var (bazı işlevleri çağırabilir).

Bunu Angular 2 ile nasıl yapabilirim?

Önceki tüm cevaplara ek olarak, bunu RxJS Observables kullanarak yapardım

lütfen Observable.timer'ı kontrol edin

İşte örnek bir kod, 2 saniye sonra başlayacak ve ardından her saniye işaretlenecek:

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

Ve işte çalışan bir dalgıç

Güncelle AppComponent sınıfında bildirilen bir işlevi çağırmak istiyorsanız, aşağıdakilerden birini yapabilirsiniz:

** Çağırmak istediğiniz işlevin adı func olduğunu varsayarsak ,

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

Yukarıdaki yaklaşımla ilgili sorun, 'this' inside func olarak adlandırırsanız, bunun AppComponent nesnesi yerine abone nesnesine başvurmasıdır ki bu muhtemelen istediğiniz şey değildir.

Bununla birlikte, aşağıdaki yaklaşımda, bir lambda ifadesi oluşturursunuz ve içindeki işlevi func olarak adlandırırsınız. Bu şekilde, func çağrısı hala AppComponent kapsamındadır. Bence bunu yapmanın en iyi yolu bu.

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

çalışma kodu için bu tıkayıcıyı kontrol edin .

Başka bir çözüm de TimerObservable kullanmaktır.

TimerObservable , Observable'ın bir alt sınıfıdır.

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

Not: Abonelikten çıkmayı unutmayın.

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

    }


}

Rxjs 6.2.2 ve Angular 6.1.7 ile şunu alıyordum:

Observable.timer is not a function

hata. Bu, Observable.timerşununla değiştirilerek çözüldü 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();    
}

Basitçe setInterval yardımcı programını kullanabilir ve ok işlevini geri çağırma olarak kullanabilirsiniz, böylece thisbileşen örneğini gösterecektir.

Örneğin:

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

NgOnDestroy yaşam döngüsü kancanızın içindeki aralığı temizleyin.

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

Zamanlayıcı kullanmak zorunda olduğum bir sorunla karşılaştım, ancak bunları aynı anda, aynı ekranda 2 bileşen halinde görüntülemek zorunda kaldım. Bir hizmette timerObservable'ı oluşturdum. Her iki bileşendeki zamanlayıcıya abone oldum ve ne oldu? Senkronize edilmez, çünkü yeni abonelik her zaman kendi akışını oluşturur.

Söylemek istediğim, bir zamanlayıcıyı birkaç yerde kullanmayı planlıyorsanız, her zaman .publishReplay(1).refCount() Gözlemcinin sonuna koyun , çünkü her seferinde aynı akışı yayınlayacaktır.

Misal:

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

Hizmet olarak RxJS ile bunu kolaylaştıran bir npm paketi bulundu.

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

Mevcut bir zamanlayıcıya 'abone olabilirsiniz', böylece aynı bileşende birçok kez kullanıyorsanız, milyonlarca zamanlayıcı oluşturmazsınız.

NgOnInit'te bir yöntem çalıştırmayı düşünüyorsanız, şöyle bir şey yapabilirsiniz:

bu 2 kitaplığı RXJS'den içe aktarın:

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

Ardından zamanlayıcı ve özel aboneliği bildirin, örneğin:

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

Son fakat en az değil, zamanlayıcı durduğunda yöntemi çalıştır

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

Hepsi bu, Açısal 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 => { },
    );
}