Angular 2에 타이머가 필요합니다.이 타이머는 시간 간격을두고 작업을 수행합니다 (일부 함수를 호출 할 수 있음).
Angular 2로이 작업을 수행하는 방법은 무엇입니까?
답변
이전의 모든 답변 외에도 RxJS Observables를 사용하여 수행합니다.
Observable.timer 를 확인하십시오.
다음은 샘플 코드입니다. 2 초 후에 시작되고 1 초마다 틱합니다.
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);
}
}
그리고 여기에 작동하는 플런 커가 있습니다.
업데이트
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);
});
}
이 플 런커 에서 작동 코드를 확인하십시오 .
답변
또 다른 해결책은 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();
}
}
PS : 탈퇴하는 것을 잊지 마세요.
답변
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 a 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();
}
답변
setInterval 유틸리티를 사용하고 화살표 함수를 콜백으로 사용 this
하여 구성 요소 인스턴스를 가리킬 수 있습니다.
예 :
this.interval = setInterval( () => {
// call your functions like
this.getList();
this.updateInfo();
});
ngOnDestroy 수명주기 후크 내에서 간격을 지 웁니다.
ngOnDestroy(){
clearInterval(this.interval);
}
답변
타이머를 사용해야하는 문제에 직면했는데, 두 구성 요소를 동시에 같은 화면에 표시해야했습니다. 서비스에서 timerObservable을 만들었습니다. 두 구성 요소에서 타이머를 구독했는데 어떻게 되었습니까? 동기화되지 않으므로 새 구독은 항상 자체 스트림을 생성합니다.
제가 말하고 싶은 것은 여러 장소에서 하나의 타이머를 사용하려는 경우 항상 .publishReplay(1).refCount()
Observer 끝에 두면 매번 동일한 스트림을 게시한다는 것입니다.
예:
this.startDateTimer = Observable.combineLatest(this.timer, this.startDate$, (localTimer, startDate) => {
return this.calculateTime(startDate);
}).publishReplay(1).refCount();
답변
RxJS as a service를 사용하여 쉽게 할 수있는 npm 패키지를 찾았습니다.
https://www.npmjs.com/package/ng2-simple-timer
기존 타이머를 ‘구독’할 수 있으므로 동일한 구성 요소에서 여러 번 사용하는 경우 막대한 타이머를 만들지 않아도됩니다.