ngrx和rxjs observables

Question

我在rxjs中构建了一个计时器，以便在角度组件中使用。以下代码在包含在同一组件中时工作正常。计时器倒计时正在以下功能中处理：

  startTimer() {

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));

this.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.timeRemaining = this.timeRemaining + 'tick';
    if (this.timeRemaining === 0) {
      console.log('timer done');
      this.resetTimer();
    }
  },
  () => { this.resetTimer(); });
if (this.timeRemaining === 0) {
  console.log('timer is completed');
}
}

但我现在试图让timeRemaining的发出值通过容器组件中的计时器的@Input发出值。我已经尝试过各种类型的可观察，可以想象的订阅，似乎没什么用。它显示值但不连续倒计时。

首先列出计时器功能，然后在组件中显示时间，然后调用函数以在组件内返回该功能。就像我说的那样，当从一个自包含的组件中访问startTimer（）函数中的 this.timeRemaining 变量时，它倒计时就好了。

<mat-card-subtitle>{{ timeRemaining }}</mat-card-subtitle>

@Input() timeRemaining: number;