Angular 4 显示当前时间

Question

在 angular 4 变化检测系统中显示当前时间的正确（规范）方式是什么？

问题如下：根据定义，当前时间每时每刻都在不断变化。但它不能被Angular 4 变化检测系统检测到。因此，在我看来，有必要显式调用 ChangeDetectorRef::detectChanges。但是，在调用这个方法的过程中，当前时间自然会改变它的值。这导致 ExpressionChangedAfterItHasBeenCheckedError。在以下示例 (see live) 中，此错误在加载页面后几秒钟内出现：

import { Component, ChangeDetectorRef } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />
        {{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />
        {{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />
        {{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />
        {{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />
        {{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />
        {{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />
        {{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}`
})
export class AppComponent {
    get now() : string { return Date(); }
    constructor(cd: ChangeDetectorRef) {
        setInterval(function() { cd.detectChanges(); }, 1);
    }
}

Answer 1

使用箭头函数。

constructor(cd: ChangeDetectorRef){
    setInterval(() => { cd.detectChanges();  }, 1);
  }

Answer 2

首先你不需要在你的间隔内调用 ChangeDetectorRef.detectChanges()，因为 angular 正在使用 Zone.js which monkey patches the browsers setInteral method with its自己的。因此 angular 很清楚在一个时间间隔内发生的变化。

您应该像这样在间隔内设置时间：

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `{{ now }}`
})
export class AppComponent {
    public now: Date = new Date();

    constructor() {
        setInterval(() => {
          this.now = new Date();
        }, 1);
    }
}

But you shouldn't update the time on such a high rate, because it would lead to poor perfomance, because everytime the date updates angular performs a changedetection on the component tree.

如果您想以非常高的速度更新 DOM，您应该使用 NgZone 中的 runOutsideAngular 并使用 [=17] 手动更新 DOM =].

例如：

@Component({
  selector: 'my-counter',
  template: '<span #counter></span>'
})
class CounterComponent implements OnChange {
  public count: number = 0;

  @ViewChild('counter')
  public myCounter: ElementRef;

  constructor(private zone: NgZone, private renderer: Renderer2) {
    this.zone.runOutsideAngular(() => {
      setInterval(() => {
        this.renderer.setProperty(this.myCounter.nativeElement, 'textContent', ++this.count);
      }, 1);
    });
  }
}

Answer 3

根据 Angular 关于 DatePipe Link 的文档，可以使用 Date.now()。

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `{{ now | date:'HH:mm:ss'}}`
})
export class AppComponent {
    now:number;

    constructor() {
        setInterval(() => {
          this.now = Date.now();
        }, 1);
    }
}

Answer 4

CurrentTime: any;
  constructor() {
    setInterval(() => {
      this.CurrentTime = new Date().getHours() + ':' + new Date().getMinutes() + ':'+  new Date().getSeconds()}, 1);
  }

Answer 5

today: number = Date.now();

constructor() {
    setInterval(() => {this.today = Date.now()}, 1);
}

如果要在 html 页面上设置格式，请按如下方式使用：

<p>{{today | date:'fullDate'}} {{today | date:'h:mm:ss a'}}</p>

我要再补充一点，因为这个答案，我发现了这一点并且可能更接近我的解决方案，所以对于另一个正在寻找类似问题的人，我也添加了这一点:)

如果你想获得 [Year: Month :date :hours: minutes with am/pm ] 格式的所有数字（例如：12 而不是字符串“December”），只需使用以下

<p>{{today | date:'y:M:d:h:mm a'}}</p>

Answer 6

实际上，您不需要任何库来完成这个简单的任务。如果您在 angular 项目中使用 angular 6+，则从通用包中导入 formatDate 并传递其他数据。这是一个示例：

import { Component } from '@angular/core';
import {formatDate } from '@angular/common';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  today= new Date();
  todaysDataTime = '';

  constructor() {
    this.todaysDataTime = formatDate(this.today, 'dd-MM-yyyy hh:mm:ss a', 'en-US', '+0530');
  }
}

这里是 stackblitz link，你可以在这里编辑：https://stackblitz.com/edit/angular-h63y8e

Answer 7

在angular 2+ 如果我们使用反应形式

<input formControlName="scheduleTime" type="time"  class="form-control ">


this.orderForm.controls.scheduleTime.setValue(new Date().toString().split(' ')[4]);

使用上面的代码我们将在时间输入中显示当前时间

Angular 4 显示当前时间

Angular 4 display current time

javascript

rxjs

zonejs

angular

在 angular 4 变化检测系统中显示当前时间的正确（规范）方式是什么？