Angular 4 Display aktuelle Zeit

Question

Was ist die korrekte (kanonische) Möglichkeit zur Anzeige der aktuellen Zeit in Winkel 4 Change Detection System?

Das Problem ist wie folgt: aktuelle Zeit ändert sich ständig, jeden Moment, per Definition. Aber es ist nicht durch Angular 4 Change Detection System nachweisbar. Aus diesem Grund ist es meiner Meinung nach notwendig, explizit ChangeDetectorRef::detectChanges zu nennen. Beim Aufruf dieser Methode ändert die aktuelle Zeit jedoch ihren Wert. Dies führt zu ExpressionChangedAfterItHasBeenCheckedError. Im folgende Beispiel (see live) Dieser Fehler tritt withing ein paar Sekunden nach dem Laden der Seite:

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

Zunächst einmal brauchen Sie nicht ChangeDetectorRef.detectChanges() in Ihrem Intervall zu nennen, weil Winkel ist Zone.js welche Affen Patches der Browser setInteral Methode mit einer eigenen Verwendung. Daher weiß angular sehr gut, welche Änderungen während eines Intervalls auftreten.

Sie sollten die Zeit in Ihrem Intervall wie folgt festgelegt:

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

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

Aber Sie sollten sich die Zeit auf einer so hohen Rate nicht aktualisieren, weil es zu einer schlechten Performance führen würde, weil jedes Mal das Datum updates angular führt eine Änderungserkennung am Komponentenbaum durch.

Wenn Sie das DOM mit einer sehr hohen Rate aktualisieren mögen, sollten Sie runOutsideAngular von NgZone verwenden und den DOM manuell die Renderer2 Verwendung aktualisieren.

Zum Beispiel:

@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 2

Pfeilfunktion.

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