Мне нужен таймер в Angular 2, который тикает через некоторый промежуток времени и выполняет некоторые задачи (может быть, вызов некоторых функций).
Как это сделать с Angular 2?
Мне нужен таймер в 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);
}
Проблема с вышеприведенным подходом заключается в том, что если вы вызываете 'this' внутри func, он будет ссылаться на объект-подписчик вместо объекта AppComponent, который, вероятно, не тот, который вы хотите.
Однако в приведенном ниже подходе вы создаете лямбда-выражение и вызываете в нем функцию func. Таким образом, вызов функции func все еще находится в области AppComponent. Это лучший способ сделать это, на мой взгляд.
ngOnInit(){
let timer = Observable.timer(2000,1000);
timer.subscribe(t=> {
this.func(t);
});
}
проверьте этот плункер для рабочего кода.
Другое решение - использовать 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 is not function".
Это было решено заменой "Observable.timer" на "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();
}
У меня возникла проблема с тем, что мне приходилось использовать таймер, но мне приходилось отображать их в 2 компонента одновременно, на одном экране. Я создал timerObservable в службе. Я подписался на таймер в обоих компонентах, и что произошло? Он не будет синхронизирован, потому что новая подписка всегда создает собственный поток.
Я бы хотел сказать, что если вы планируете использовать один таймер в нескольких местах, всегда ставьте .publishReplay(1).refCount()
в конце Observer, потому что он будет публиковать один и тот же поток из него каждый раз.
Пример:
this.startDateTimer = Observable.combineLatest(this.timer, this.startDate$, (localTimer, startDate) => {
return this.calculateTime(startDate);
}).publishReplay(1).refCount();
Вы можете просто использовать утилиту setInterval и использовать функцию стрелки в качестве обратного вызова, чтобы this
указывало на экземпляр компонента.
Например:
this.interval = setInterval( () => {
// call your functions like
this.getList();
this.updateInfo();
});
Внутри вашего крючка жизненного цикла ngOnDestroy очистите интервал.
ngOnDestroy(){
clearInterval(this.interval);
}
Найден пакет npm, который упрощает работу с RxJS в качестве службы.
https://www.npmjs.com/package/ng2-simple-timer
Вы можете "подписаться" на существующий таймер, чтобы не создавать таймеры bazillion, если вы используете его много раз в одном компоненте.
Если вы хотите запустить метод в ngOnInit, вы можете сделать что-то вроде этого:
импортировать эти 2 библиотеки из RXJS:
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
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 => { },
);
}