Angular 6中的倒数计时器

Question

您好，我正在尝试获取一个倒数计时器示例，我在 Stack 上搜索时发现：Time CountDown in angular 2

这是我的代码：

import { Component, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { Observable, Subscription, interval  } from 'rxjs';

@Component({
  selector: 'app-timer',
  templateUrl: './timer.component.html',
  styleUrls: ['./timer.component.css']
})
export class TimerComponent implements OnInit {
  private future: Date;
  private futureString: string;
  private diff: number;
  private $counter: Observable<number>;
  private subscription: Subscription;
  private message: string;

  constructor(elm: ElementRef) {
      this.futureString = elm.nativeElement.getAttribute('inputDate');
  }

  dhms(t) {
      let days, hours, minutes, seconds;
      days = Math.floor(t / 86400);
      t -= days * 86400;
      hours = Math.floor(t / 3600) % 24;
      t -= hours * 3600;
      minutes = Math.floor(t / 60) % 60;
      t -= minutes * 60;
      seconds = t % 60;

      return [
          days + 'd',
          hours + 'h',
          minutes + 'm',
          seconds + 's'
      ].join(' ');
  }

  ngOnInit() {
      this.future = new Date(this.futureString);
      this.$counter = Observable.interval(1000).map((x) => {
          this.diff = Math.floor((this.future.getTime() - new Date().getTime()) / 1000);
          return x;
      });

      this.subscription = this.$counter
          .subscribe((x) => this.message = this.dhms(this.diff));
  }
}

得到以下错误：

timer/timer.component.ts(44,34)：错误 TS2339：属性“间隔” 'typeof Observable' 类型上不存在。

我已经尝试了所有可以在 Google 上找到的导入方法，但没有任何效果。我也更新到最新版本的 rxjs 还是什么都没有。任何帮助将不胜感激。

我相信我可能有某种版本问题或其他问题。真难过。

npm ERR! peer dep missing: jquery@1.9.1 - 3, required by bootstrap@4.1.1
npm ERR! peer dep missing: popper.js@^1.14.3, required by bootstrap@4.1.1
npm ERR! missing: mkdirp@0.5.1, required by node-pre-gyp@0.9.1
npm ERR! missing: minimist@0.0.8, required by mkdirp@0.5.1
npm ERR! missing: minimatch@3.0.4, required by ignore-walk@3.0.1
npm ERR! missing: brace-expansion@1.1.11, required by minimatch@3.0.4
npm ERR! missing: balanced-match@1.0.0, required by brace-expansion@1.1.11
npm ERR! missing: concat-map@0.0.1, required by brace-expansion@1.1.11
npm ERR! missing: console-control-strings@1.1.0, required by npmlog@4.1.2
npm ERR! missing: inherits@2.0.3, required by readable-stream@2.3.6
npm ERR! missing: safe-buffer@5.1.1, required by readable-stream@2.3.6
npm ERR! missing: safe-buffer@5.1.1, required by string_decoder@1.1.1
npm ERR! missing: console-control-strings@1.1.0, required by gauge@2.7.4
npm ERR! missing: string-width@1.0.2, required by gauge@2.7.4
npm ERR! missing: strip-ansi@3.0.1, required by gauge@2.7.4
npm ERR! missing: code-point-at@1.1.0, required by string-width@1.0.2
npm ERR! missing: is-fullwidth-code-point@1.0.0, required by string-width@1.0.2
npm ERR! missing: strip-ansi@3.0.1, required by string-width@1.0.2
npm ERR! missing: number-is-nan@1.0.1, required by is-fullwidth-code-point@1.0.0
npm ERR! missing: ansi-regex@2.1.1, required by strip-ansi@3.0.1
npm ERR! missing: string-width@1.0.2, required by wide-align@1.1.2
npm ERR! missing: inherits@2.0.3, required by glob@7.1.2
npm ERR! missing: minimatch@3.0.4, required by glob@7.1.2
npm ERR! missing: once@1.4.0, required by glob@7.1.2
npm ERR! missing: once@1.4.0, required by inflight@1.0.6
npm ERR! missing: wrappy@1.0.2, required by inflight@1.0.6
npm ERR! missing: wrappy@1.0.2, required by once@1.4.0
npm ERR! missing: minipass@2.2.4, required by tar@4.4.1
npm ERR! missing: mkdirp@0.5.1, required by tar@4.4.1
npm ERR! missing: safe-buffer@5.1.1, required by tar@4.4.1
npm ERR! missing: yallist@3.0.2, required by tar@4.4.1
npm ERR! missing: minipass@2.2.4, required by fs-minipass@1.2.5
npm ERR! missing: safe-buffer@5.1.1, required by minipass@2.2.4
npm ERR! missing: yallist@3.0.2, required by minipass@2.2.4
npm ERR! missing: minipass@2.2.4, required by minizlib@1.1.0

Answer 1

ngx-countdown 是更成熟的解决方案。它提供了所有格式化选项以及启动/停止/暂停/恢复功能。

现场演示here

Answer 2

简单写：

import { interval } from 'rxjs';
import { map } from 'rxjs/operators'

interval(1000).pipe(
  map((x) => { /* your code here */ })
);

在 RxJS 6+ 中没有 Observable.interval 函数。

Answer 3

从Rxjs 6.0 你必须从rxjs/observable/interval 导入interval。

您必须使用pipe 运算符来顺序执行无限数量的运算符。

import { interval } from 'rxjs';
import { map } from 'rxjs/operators'

this.$counter = interval(1000).pipe(
   map((x) => {
      this.diff = Math.floor((this.future.getTime() - new Date().getTime()) / 1000);
      return x;
  });
)

参考： https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md#build-your-own-operators-easily