Angular2 - gebundene Eigenschaft sofort aktualisieren

Question

am Anfang Ich habe eine einfache Frage: "Wann und warum werden Bindungen in Angular2 ausgewertet/aktualisiert?"

Ich möchte erreichen, dass die gebundene Eigenschaft sofort aktualisiert wird, wenn die Quelle gesetzt ist.

Diese sehr einfache Plunker Demo demonstriert das Verhalten:

Plunker demo

Und der interessanteste Teil des Codes:

setValue() { 
    console.log(this.childComponent.prop); 
    this.propValue = "button clicked"; 
    //NOW I WANT TO GET THE NEW VALUE 
    console.log(this.childComponent.prop); 
} 

Die aktualisierte Interpolation in Vorlage sagt die Bindung korrekt ausgewertet wird und Die Zieleigenschaft wird aktualisiert, jedoch manchmal später aus setValue Method Scope.

Warum möchte ich dieses Verhalten?

Ich weiß diese Art der Arbeit mit Komponenten Interaktion ist nicht notwendig, aber ... Ich habe eine komplexere benutzerdefinierte Formularsteuerung (Implementierung ControlValueAccessor). Jetzt arbeite ich an einem "Geschäftsprozess": Das ngModel dieser komplexen Komponente ist Teil eines komplexeren Objekts, auf das mehrere Komponenten zugreifen können, die sich gegenseitig beeinflussen können.

Vereinfachtes Beispiel:

Modell

{ 
public modelA: SomeClasss; <-- this is ngModel of comp. A 
public modelB: SomeClasss; {...} <-- this is ngModel of comp. B 
} 

Zwischenzeit woanders im Code:

update(X: SomeClass) { 
    this.modelA = X; 
    this.componentA.updateMagicUI(); 
} 

Wo die updateMagicUI Methode eine komplexe Logik trägt mit dem internen Strukturen des COMPONENTA arbeitet basierend auf es neu gesetzter Wert. Beachten Sie, dass ich diese Logik nur dann ausführen möchte, wenn sie explizit aufgerufen wird und nicht jedes Mal, wenn der Wert geändert wird.

Answer 1

Ein Verfahren in this answer vorgeschlagene Änderungserkennung auszulösen ist die tick Methode von ApplicationRef zu nennen:

import { ..., ApplicationRef } from '@angular/core' 
... 

export class App { 
    ... 
    constructor(private applicationRef: ApplicationRef) { 
    ... 
    } 
    setValue() { 
    console.log(this.childComponent.prop); 
    this.propValue = "button clicked"; 
    this.applicationRef.tick(); // Trigger change detection 
    console.log(this.childComponent.prop); 
    } 
} 

Sie es in this plunker testen können.