我如何實現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> 

這最終會漂移，因為它不會每秒都運行。 它也沒有考慮像夏令時這樣的異常現象。

選項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（）獲取時間戳之間。

請注意，如果客戶端更改了系統時鍾，那么它可能會丟失您的時鍾，直到您再次與服務器同步。