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

问题如下：根据定义，当前时间每时每刻都在不断变化。但角4变化检测系统无法检测到。因此，在我看来，有必要显式调用

ChangeDetectorRef:：detectChanges

。但是，在调用此方法的过程中，当前时间会自然地更改其值。这会导致

表达式发生更改，但会导致检查错误
。在以下示例（）中，此错误在加载页面后几秒钟内出现：

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

从'@angular/core'导入{Component，ChangeDetectorRef}；
@组成部分({
选择器：“我的应用程序”，
模板：`{now}}
{now}
{{now}}
{{now}}
{{now}
{{now}
{{now}

{{now}
{{now}
{{now}
{{now}
{{now}
{{now}
{now}

{{now}
{{now}
{{now}
{{now}
{{now}
{{now}
{now}

{{now}
{{now}
{{now}
{{now}
{{now}
{{now}
{now}

{{now}
{{now}
{{now}
{{now}
{{now}
{{now}
{now}

{{now}
{{now}
{{now}
{{now}
{{now}
{{now}
{now}

{{now}
{{now}
{{now}
{{now}
{{now}
{{now}
{now}

{{now}
{{now}
{{now}
{{now}
{{now}
{{now}
{now}`
})
导出类AppComponent{
立即获取（）：字符串{返回日期（）；}
构造函数（cd:ChangeDetectorRef）{
setInterval（函数（）{cd.detectChanges（）；}，1）；
}
}
使用箭头功能

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

首先，您不需要在间隔内调用
ChangeDetectorRef.detectChanges（）
，因为angular使用的是
Zone.js
，monkey用自己的方法修补浏览器
setInteral
方法。因此，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);
    }
}

但是您不应该以如此高的速率更新时间，因为这会导致性能不佳，因为每次更新日期时都会在组件树上执行更改检测

如果要以非常高的速率更新DOM，应使用
NgZone
中的
runOutsideAngular
，并使用
Renderer2
手动更新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);
    });
  }
}

@组件({
选择器：“我的计数器”，
模板：“”
})
类计数器组件实现OnChange{
公共计数：数字=0；
@ViewChild（'计数器'）
公共myCounter:ElementRef；
构造函数（专用区域：NgZone，专用渲染器：渲染器2）{
此.zone.runOutsideAngular（（）=>{
设置间隔（（）=>{
this.renderer.setProperty（this.myCounter.nativeElement，'textContent'，++this.count）；
}, 1);
});
}
}
根据
DatePipe
上的角度文档，可以使用
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);
    }
}

today:number=Date.now（）；
构造函数（）{
setInterval（（）=>{this.today=Date.now（）}，1）；
}

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

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

{今天|日期：'fullDate'}{{今天|日期：'h:mm:ss a'}


我又增加了一点，我发现了这一点，由于这个答案，它可能更接近我的解决方案，所以对于另一个寻求类似问题的人，我也增加了这一点：）

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

{{今天|日期：'y:M:d:h:mm a'}

实际上，这个简单的任务不需要任何库。如果您使用angular 6+在angular项目中执行此操作，请从通用包导入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链接，您可以在这里编辑：
非常感谢您的详细解释，它澄清了很多。我想确定这个例子是一个基本的角度缺陷：为什么我们必须在角度变化检测系统之外显式地调用
runOutsideAngular
，并显式地手动设置间隔？它是否与框架范式相矛盾？这不是一个缺陷。更改检测并不是以如此高的速率进行更新，这就是为什么angular提供了
NgZone
服务，该服务提供了一种不调用更改检测算法而手动执行计算或更新视图的方法。第一个示例中的解决方案可能会导致ExpressionChangedTerithasBeenCheckedError，也就是说，如果没有直接的元素访问，就无法显示时间。我的意思是有缺陷。。。正确的解决方案超出角度模板。在google解决方案中，从这里开始，它被管道包裹，看起来更好。第一个示例不会导致
表达式更改TerithasBeenCheckedError
，因为它在区域内运行，因此在该速率下只会对性能产生巨大影响。唯一的问题是，如果组件使用的是
ChangeDetectionStrategy.OnPush
angular将无法检测到更改。简单而流畅