私はAngular 2にタイマーが必要です。これは時間間隔の経過後に作動し、何らかのタスクを実行します(いくつかの関数を呼び出すことができます)。
Angular 2を使用してこれを行う方法
これまでのすべての答えに加えて、RxJS Observablesを使ってそれを行います。
Observable.timer を確認してください。
これはサンプルコードで、2秒後に開始してから毎秒刻みます。
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);
}
}
そして、これが実用的な plunker です。
更新AppComponentクラスで宣言された関数を呼び出したい場合は、次のいずれかを実行できます。
**呼び出したい関数の名前がfuncであるとします。
ngOnInit(){
let timer = Observable.timer(2000,1000);
timer.subscribe(this.func);
}
上記のアプローチの問題点は、func内で 'this'を呼び出すと、AppComponentオブジェクトではなくサブスクライバオブジェクトが参照されることです。
ただし、以下の方法では、ラムダ式を作成し、その中にある関数funcを呼び出します。このように、funcの呼び出しはまだAppComponentの範囲内です。これは私の意見ではそれを行うための最良の方法です。
ngOnInit(){
let timer = Observable.timer(2000,1000);
timer.subscribe(t=> {
this.func(t);
});
}
作業コードについては this plunker を確認してください。
他の解決策はTimerObservableを使うことです
TimerObservable は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.S .:退会することを忘れないでください。
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およびAngular 6.1.7では、「Observable.timerは関数ではありません」というエラーが表示されました。
これは "Observable.timer"を "timer"に置き換えることで解決されました。
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();
}
私はタイマーを使わなければならないという問題に直面しました、しかし私は2つのコンポーネントで同じ時間、同じスクリーンでそれらを表示しなければなりませんでした。 timerObservableをサービスに作成しました。両方のコンポーネントでタイマーを購読しましたが、どうなりましたか?それは同期されません、新しい購読が常にそれ自身のストリームを作成するので。
私が言いたいのは、あなたがいくつかの場所で一つのタイマーを使うつもりなら、常に.publishReplay(1).refCount()
をObserverの最後に置いて、毎回それから同じストリームを公開するようにしてください。
例:
this.startDateTimer = Observable.combineLatest(this.timer, this.startDate$, (localTimer, startDate) => {
return this.calculateTime(startDate);
}).publishReplay(1).refCount();
this
がコンポーネントインスタンスを指すように、単にsetIntervalユーティリティを使用し、コールバックとしてarrow関数を使用することができます。
例:
this.interval = setInterval( () => {
// call your functions like
this.getList();
this.updateInfo();
});
NgOnDestroyライフサイクルフックの内側で、間隔を空にします。
ngOnDestroy(){
clearInterval(this.interval);
}
NgOnInitでメソッドを実行したい場合は、次のようにします。
rXJSからこの2つのライブラリをインポートします。
import {Observable} from 'rxjs/Rx';
import {Subscription} from "rxjs";
次に、タイマーとプライベートサブスクリプションを宣言します。次に例を示します。
timer= Observable.timer(1000,1000); // 1 second for 2 seconds (2000,1000) etc
private subscription: Subscription;
最後になりますが、タイマーが停止したときにメソッドを実行します
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
});
}
これですべてです、Angular 5
サービスとしてのRxJSでこれを簡単にするnpmパッケージを見つけました。
https://www.npmjs.com/package/ng2-simple-timer
既存のタイマーを「購読」することで、同じコンポーネントで何度も使用しているのであれば、bazillionタイマーを作成しないでください。
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 => { },
);
}