2017-02-14 2 views
2

Ich verwende eine Angular 2 @Input -Eigenschaft, um gewünschte numerische Werte an die untergeordnete Komponente wie folgt übergeben.Angular 2 ngOnChanges feuern nicht auf schnell wechselnden Eingang

Geordnete Komponente:

@Component({ 
selector: 'test-parent', 
template: '<button (click)="raiseCounter()">Click me!</button><test-child [value]="counter"></test-child>' 
}) 

export class ParentComponent { 
public counter: number = 0; 

raiseCouner() { 
    this.counter += 1; 
    this.counter += 1; 
    this.counter += 1; 
} 
} 

Kinder Komponente:

@Component({ 
    selector: 'test-child' 
}); 

export class ChildComponent implments OnChanges { 
@Input() value: number = 0; 

ngOnChanges() { 
    if (this.value) { 
    this.doSomeWork(); 
    } 
} 

doSomeWork() { 
    console.log(this.value); 
} 
} 

In diesem Szenario wird die OnChanges Lifecycle Haken nur einmal ausgelöst anstelle von 3 mal zeigt, dass der Eingangswert von 0 geändert 3. Ich brauche es jedoch jedes Mal, wenn sich der Wert ändert (0 -> 1, 1 -> 2, 2 -> 3, etc ..). Gibt es eine Möglichkeit, dies zu tun?

Danke.

Antwort

1

Das ist das erwartete Verhalten.
Angular2 läuft Änderungserkennung, wenn die (click) Ereignishandler abgeschlossen ist, die nach dem 3. += 1 ist.
Wenn die Änderungserkennung eine @Input() Bindung aktualisiert, wird ngOnChanges() aufgerufen.

Verwandte Themen