javascript - 使用 Angular 6 和 RxJs 6 显示时钟

Question

如何使用 Angular 6 使用 rxjs 6 显示时钟。下面的代码适用于 Angular 5。但现在我收到一条错误消息，指出间隔不是 Observable 类型。

@Injectable()
export class MailService {

  private clock: Observable<Date>;


  constructor(private http : HttpClient) { 
    this.clock = Observable.interval(1000).map(tick => new Date()).share();
  }

  getClock(): Observable<Date> {
    return this.clock;
  }

}

Answer 1

我会建议对 Sachila 的给定答案进行一些小的改进。和 codeepic对于这些问题:

1. interval() 运算符在第一个值之后发出它的第一个值时期已经过去(见 docs )
2. 使用 share()，后续订阅可能会错过最后一个滴答，并且必须等待 1 秒，直到下一个值到达。这可能会导致显示响应延迟。

解决方法:

1. 使用 timer(0, 1000):“它类似于间隔，但您可以指定何时开始发射。” (参见 docs)
2. 使用 shareReplay(1)，其中 1 表示在新订阅上发出的先前发出的值的数量

代码(Angular 6 与 RxJS 6):

import { Injectable } from "@angular/core";

import { Observable, timer } from "rxjs";
import { map, shareReplay } from "rxjs/operators";

@Injectable({
  providedIn: "root"
})
export class ClockService {
  private _time$: Observable<Date> = timer(0, 1000).pipe(
    map(tick => new Date()),
    shareReplay(1)
  );

  get time() {
    return this._time$;
  }

  constructor() {}
}  

获取时间:

import { ClockService } from "PATH/clock.service";

constructor(private _clockService: ClockService) {
   this._clockService.time.subscribe((now: Date) =>
     console.log("time:", now.toISOString())
   );
}