rxjs6定时器在Angular 6订阅中未触发可观察定时器已投入使用
rxjs6定时器在Angular 6订阅中未触发可观察定时器已投入使用
提问于 2018-06-28 07:20:54
我正在尝试将rxjs 6中的计时器放入angular 6服务中。而且它没有被触发。我在文档中看了看，但没有任何运气。这是我的服务代码(仅相关部分：
import { map,flatMap, catchError, take } from 'rxjs/operators';
import { BehaviorSubject, of, throwError,timer, Observable } from "rxjs";
.....
countdownTimer = new Observable<number>();
formatCountdownTime(count) {
const seconds = count % 60 < 10 ? '0' + Math.floor(count % 60) : Math.floor(count % 60);
/* if(count <= 1000){
//set timer to NOT RUNNING state so it updates UI components like the button that depends on the count
this.contributorManagerService.countdownTimerIsRunning.next(false);
} */
return Math.floor(count / 60) + ':' + seconds;
}
createCountdownTimerObservable(count){
this.countdownTimer = timer(0, 1000);
}这是计时器的消耗。我需要知道时间已经过去了，这就是为什么我要把第三个函数参数传递给订阅，因为我需要在时间到的时候启用一个按钮。
import { map,take } from 'rxjs/operators';
export class CampaignDataComponent implements OnInit, OnDestroy {
countdownTimerIsRunning = false ;
count: number;
ngOnInit(){
/* I subscribe to the timer and the 3rd parameter indicates what to do when time has elapsed */
this.sharedHelpersService.countdownTimer.
pipe(
take(this.count),
map(() => {
--this.count;
return this.count;
})
).subscribe(count=>{
console.log("New count",count);
if(count>0){
this.countdownTimerIsRunning = true;
}
},
err=>{
console.log("Countdown timer error", err);
},
()=>{
console.log("Time has elapsed");
this.countdownTimerIsRunning = false;
});
}
}你知道为什么没有被触发吗？当我在组件上使用整个链时，它可以工作，但因为我需要从其他组件使用它，所以我不得不将它放在一个服务中，这破坏了它。有什么好主意吗？非常感谢你提前
编辑:只是为了澄清，他们所有的组件都应该使用相同的倒计时
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-28 10:32:59
下面的代码可以让多个组件共享一个计时器：
服务：
import { Injectable } from '@angular/core';
import { timer, Subject, Observable } from 'rxjs';
import { takeWhile, map } from 'rxjs/operators';
@Injectable()
export class CountdownService {
private _countdown = new Subject<number>();
countdown(): Observable<number> {
return this._countdown.asObservable();
}
private isCounting = false;
start(count: number): void {
// Ensure that only one timer is in progress at any given time.
if (!this.isCounting) {
this.isCounting = true;
timer(0, 1000).pipe(
takeWhile(t => t < count),
map(t => count - t)
).subscribe(
t => this._countdown.next(t),
null,
() => {
this._countdown.complete();
this.isCounting = false;
// Reset the countdown Subject so that a
// countdown can be performed more than once.
this._countdown = new Subject<number>();
}
);
}
}
}组件可以使用以下命令启动倒计时
countdownService.start(myCountdownTime)并且所有对倒计时时间感兴趣的组件都可以订阅
countdownService.countdown().subscribe(t => ...)Stack Overflow用户
发布于 2018-06-28 10:32:12
问题出在下面的代码中
pipe(
take(this.count),
map(() => {
--this.count;
return this.count;
})我假设组件中没有其他代码，所以this.count初始化为0。然后，您订阅可观察对象，并说effectively (0)，因此，可观察对象立即完成。
Stack Overflow用户
发布于 2018-06-28 08:45:08
当您说您需要使用其他组件的倒计时时，如果您的意思是您需要使用其他组件的功能，但订阅的每个组件都有自己的独立倒计时，那么您可以执行以下操作：
服务：
import { timer, Observable } from 'rxjs';
import { filter, takeWhile, map } from 'rxjs/operators';
// startTime is in seconds
count(startTime: number): Observable<number> {
return timer(0, 1000).pipe(
takeWhile(t => t < startTime),
map(t => startTime - t)
)
}组件：
// Count down for 10 seconds.
countdownService.count(10).subscribe(
t => console.log(t),
null,
() => console.log('Done!')
)这将打印: 10 9 8 7 6 5 4 3 2 1 Done！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51072691
复制相关文章
相似问题
腾讯云开发者
