以角度显示时间/时钟

Question

我正在使用以下方法在我的应用中显示时间？

constructor(private datePipe: DatePipe) {}
ngOnInit() {
    this.getTime();
    this.date = this.datePipe.transform(new Date(), "dd/MM/yyyy");
  }
 getTime() {
    setInterval(() => {
      this.time = this.datePipe.transform(new Date(), "HH:mm:ss");
      this.getTime();
    }, 1000);
  }

这段代码可以正常工作，但是一段时间后应用程序崩溃了。有没有其他方法可以在angular4 / 5/6中显示时间？

Answer 1

内部component.ts

time = new Date();

ngOnInit() {
    setInterval(() => {
       this.time = new Date();
    }, 1000);
}

内部component.html

{{ time | date: 'hh:mm:ss a' }}

工作演示

Answer 2

或者，您可以使用可观察量：

private _time$: Observable<Date> = timer(0, 1000).pipe(
  map(tick => new Date()),
  shareReplay(1)
);

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

在你的html中：

{{ time | async | date: 'hh:mm:ss a' }}

好处：当你在HTML中使用async管道时，你不再需要考虑订阅和取消订阅以及担心内存泄漏。它完全安全且易于使用！