ngrx可观察计时器，角度为5 [英] ngrx observable timer angular 5

问题描述

我是angular和ngrx的新手.我正在构建一个与Todoist api集成的pomodoro计时器应用程序.我已经使用[ngrx/platform示例应用程序作为入门应用程序]( https://github.com /ngrx/example-app )，该容器使用带有组件的容器.我最初在纯rxjs中创建了一个计时器，该计时器可以自行运行.我目前正在尝试将TaskDetail页面中的计时器集成到我的代码中，该页面可以与选定任务页面协同工作.有一个播放/暂停按钮应该与它各自的动作配合使用.计时器播放并暂停，但剩余时间显示不正确.我假设是因为我没有订阅计时器和/或将时间传递给我应该采用的方式.这些按钮都调用与到selected-task-page.ts的输出相同的功能，selected-task-page.ts具有pomo-timer-service.ts的提供程序

I am very much a newbie to angular and ngrx. I am building a pomodoro timer app that integrates with the Todoist api. I have used the the [ngrx/platform example app as a starter app] (https://github.com/ngrx/example-app) which uses containers with components. I originally created a timer in pure rxjs that functions as it should on it's own. I am currently trying to integrate the timer into my code from a taskDetail page that works in conjunction with a selected-task page. There is a play/pause button that should should behave with it's respective actions. The timer plays and pauses but the time remaining is not displaying correctly. I am assuming because i am not subscribing to the timer and/or passing to the time the way in which i should. The buttons all call the same function as output to selected-task-page.ts which has a provider of pomo-timer-service.ts

task-detail.ts

timeRemaining: any;
private timerSubscription: Subscription;

constructor(public pomoTimerService: PomoTimerService, private store: 
 Store<fromTasks.State>) {
 this.task$ = store.pipe(select(fromTasks.getSelectedTask));
 this.isSelectedTaskInCollection$ = store.pipe(
  select(fromTasks.isSelectedTaskInCollection)
 );
 this.timerSubscription = this.pomoTimerService.getState().subscribe(
  timeRemaining => {
    this.timeRemaining = timeRemaining;
   }
  );
}

<button id="resume" name="resumeButton" class="resume-btn"
mat-raised-button color="primary" (click)="resumeCommand($event)"><i class="material-icons">play_arrow</i></button>
<button id="pause" name="pauseButton" class="pause-btn"
mat-raised-button color="primary" (click)="resumeCommand($event)"><i class="material-icons">pause</i></button>

 

上面的模板作为输入并输出以下内容:

The above template has as inputs and outputs the following:

@Input() timeRemaining: number;
@Input() timerSubscription: Subscription;
@Output() resumeClicked = new EventEmitter();


resumeCommand(action: any) {
 this.resumeClicked.emit(action);
 }

**在我的selected-task-page.ts模板代码中，我有:

**Within my selected-task-page.ts template code I have:

<bc-task-detail
  [timeRemaining]="this.pomoTimerService.timeRemaining"
  [pomoTitle]="this.pomoTimerService.pomoTitle$"
  [pomoCount]="this.pomoTimerService.pomoCount$"
  (resumeClicked)="resumeClicked($event)"
  (resumeClicked)="resumeClicked($event)">
 </bc-task-detail>

我有以下呼叫该服务的机器.**

I have the following which then calls the service.**

(resumeClicked)="resumeClicked($event)"
(resumeClicked)="resumeClicked($event)"

会调用:

resumeClicked(event) {
 console.log(event);
 console.log(event.target);
 console.log(event.srcElement);
 console.log(event.type);
 console.log(event.currentTarget.attributes.name.nodeValue);
 console.log(event.currentTarget.attributes.id.nodeValue);
 this.pomoTimerService.startTimer(event);
 }

在我的pomo-timer.ts中，我有以下内容

private timerSource = new Subject<any>();
timeRemaining;

timer$ = this.timerSource.asObservable();

setState(state: any) {
 this.timerSource.next(state);
}

getState(): Observable<any> {
 return this.timerSource.asObservable();
}

然后我在pomo-timer.ts中也具有计时器功能:

Then i have the timer function in the pomo-timer.ts as well:

  startTimer(event) {
   this.buttonState = event.currentTarget.attributes.name.nodeValue;
   this.buttonAction = event.currentTarget.attributes.id.nodeValue;
   this.timerToggle = (this.buttonAction === 'resume') ? true : false;
   const resumeButton = document.getElementById('resume');
   const pauseButton = document.getElementById('pause');
   const resetButton = document.getElementById('reset');
   const interval$: any = interval(1000).pipe(mapTo(-1));
   const pause$ = fromEvent(pauseButton, 'click').pipe(mapTo(false));
   const resume$ = fromEvent(resumeButton, 'click').pipe(mapTo(true));

  const timer$ = merge(pause$, resume$).pipe(
   startWith(interval$),
   switchMap(val => (val ? interval$ : empty())),
   scan((acc, curr) => (curr ? curr + acc:acc),this.countdownSeconds$),
   takeWhile(v => v >= 0),
   )
   .subscribe(
     val => { this.timeRemaining = val; },
     () => {
     this.resetTimer();
    });
   }

这个想法是，当用户单击播放按钮时，计时器开始递减计数并显示剩余时间，并在暂停按钮将其暂停时开始计时.我的问题之一是我应该订阅timer $还是应该订阅timerRemaining，然后我如何订阅它，以便它可以输入到Input中并显示剩余时间(当它递减计数时)，最后我什至要需要用于获取和设置状态的功能吗?

The idea was that when the user clicks the play button the timer begins counting down and displaying the remaining time as it does so and when the pause button would pause it. One of my questions is should I be subscribing to timer$ or should I be subscribing to timerRemaining and then how do I subscribe to that so that it can go into the Input and display the remaining time as it is counting down and lastly do I even need to functions for getting and setting state?

我很感谢我能得到的任何帮助.先感谢您.

I appreciate any help I can get. Thank you in advance.

推荐答案

以下是开始/暂停的方式:

Here is how you could start / pause:

let defaultTime = 2;
let newTime;
let $interval;


const interval$ = Rx.Observable.timer(0, 1000).map(_ => {
  return _ <= defaultTime ? defaultTime - _ : $interval.unsubscribe();
});

function start() {
  $interval = interval$.subscribe(_ => {
    newTime = _;
    console.log(_);
  });
}

function pause() {
  $interval.unsubscribe();
  defaultTime = newTime - 1;
}

document.getElementById('btn').addEventListener('click', start)
document.getElementById('btn2').addEventListener('click', pause)

DEMO

这篇关于ngrx可观察计时器，角度为5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！