Wenn sich das Modell ändert, animiere zwischen dem alten Wert und dem neuen Wert in Angular2

Question

Ich habe einen Zähler, der angezeigt werden kann. Wenn sich der Zähler/das Modell ändert, wird die Ansicht wie erwartet aktualisiert.

Allerdings möchte ich den alten Wert nach oben und unten gehen. Ich suche nicht nach Ein- und Ausblenden zwischen alten und neuen Werten. Ich suche nach Zähler, um eine Figur nach der anderen zu steigen, bis die neue Zahl erreicht ist.

Answer 1

Sie sollten eine Komponente dafür erstellen. Das ist die eckige Art, es zu tun.

Es gibt wahrscheinlich einige Bibliotheken von Drittanbietern, aber das Erstellen einer eigenen Gegenkomponente ist ziemlich einfach. Hier ist ein ich gerade erstellt:

@Component({ 
    selector: 'counter' 
    template: `<span>{{displayValue}}</span>` 
}) 
export class Counter { 
    @Input() value: number; 
    private displayValue: number = 0; 
    private interval; 

    ngOnChanges(changes: {[propertyName: string]: SimpleChange}) { 
    clearInterval(this.interval); 
    let change = changes.value; 
    if (change) { 
     let target:number = parseInt(change.currentValue) || 0; 
     let step = target < this.displayValue ? -1 : 1; 
     this.interval = setInterval(() => { 
     if (this.displayValue !== target) { 
      this.displayValue += step; 
     } 
     else { 
      clearInterval(this.interval); 
     } 
     }, 100); 
    } 
    } 
} 

Sie können eine Live-Demo davon here sehen.