Angular 4显示当前时间 [英] Angular 4 display current time

问题描述

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

The problem is as follows: current time changes constantly, each moment, by definition. But it is not detectable by Angular 4 change detection system. For this reason, in my opinion, it's necessary to explicitly call ChangeDetectorRef::detectChanges. However, in the process of calling this method, current time naturally changes its value. This leads to ExpressionChangedAfterItHasBeenCheckedError. In the following example (see live) this error appears withing a few seconds after loading the page:

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);
    }
}

推荐答案

首先，您不需要在间隔内调用ChangeDetectorRef.detectChanges()，因为angular使用的是Zone.js，它会修补浏览器的setInteral方法拥有自己的.因此，角度清楚地知道间隔内发生的变化.

First of all you don't need to call ChangeDetectorRef.detectChanges() inside your interval, because angular is using Zone.js which monkey patches the browsers setInteral method with its own. Therefore angular is well aware of the changes happening during an interval.

您应该像这样设置时间间隔:

You should set the time inside your interval like this:

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，并使用Renderer2手动更新DOM.

If you want to update the DOM at a very high rate, you should use runOutsideAngular from NgZone and update the DOM manually using the Renderer2.

例如:

@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);
    });
  }
}

这篇关于Angular 4显示当前时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！