我如何实现Angular2时钟

Question

我尝试使用服务器时间戳实现Angular2时钟，但被击中。第二个代码返回静态DateTime

this.clock = Observable.interval(1000).map(()=> new Date());
{{clock | async | date:'medium'}} 

这确实每秒更新，效果很好

this.clock = Observable.interval(1000).map(()=> new Date(1512151753372));
{{clock | async | date:'medium'}} 

这根本不更新

1512151753372是服务器提供的时间戳

请有任何想法??

Answer 1

选项1（不要这样做...）

您可以将.scan操作员与服务器的日期播种并每秒增加一个：

：

Rx.Observable
  .interval(1000)
	.scan(function (acc, x) {
    return new Date(acc.getTime() + 1000);
  }, new Date(1512151753372))
  .subscribe(x => { console.log(x); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.min.js"></script>

这最终会漂移，因为它不会完全运行一次。它也不考虑诸如DST。

之类的异常。

选项2

这可能会更准确，但是您必须在外面做一些工作或RXJS来调整一些变量：

const server = 1512151753372;
const now = Date.now();
Rx.Observable
  .interval(1000)
  .map(x => new Date(server + Date.now() - now))
  .subscribe(x => console.log(x));

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.min.js"></script>

这应该避免＃1中的漂移问题，但是您仍然应该每15分钟从服务器中获得新的时间戳，以避免DST问题。唯一应该发生的漂移是从服务器获得时间戳和用date.now（）。

播种时之间的时间戳

请注意，如果客户端更改其系统时钟，则可能会丢弃您的时钟，直到您再次与服务器同步。