Execute HTTP-Anfrage innerhalb NgZone mit Angular2

Question

Ich frage mich, wie ich eine HTTP-Anfrage ausführen kann, wo ich die Profilansicht innerhalb der Angular2 Zone aktualisieren. In meiner Top-Level-Profil Komponente mache ich zur Zeit eine einzige einfache HTTP-Anfrage authHttp mit:

export class ProfileComponent implements OnInit { 
    constructor(
     private auth: Auth, 
     private authHttp: AuthHttp) {} 

    ngOnInit() { 
     // update profile information 
     let headers: any = { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json' 
     }; 

     this.authHttp 
      .get('https://' + myConfig.domain + '/api/v2/users/' + this.auth.userProfile.user_id, {headers: headers}) 
      .map(response => response.json()) 
      .subscribe(
       response => { 
        this.auth.userProfile = response; 
        localStorage.setItem('profile', JSON.stringify(response)); 
       }, 
       error => console.log(error.json().message) 
      ); 

    } 
} 

Das Problem ist, dass, da diese Anforderung asynchron ist, ist die Profilseite lädt vor diese Anforderung erfüllt und das Profil ist aktualisiert. Was passiert, wenn ich zum ersten Mal auf Aktualisieren klicke, passiert nichts, weil die alten Daten in das Profil geladen werden und die neuen Daten AFTER. Das zweite Mal, wenn ich auf "Aktualisieren" klicke, funktioniert alles, denn erst dann werden die neuen Daten verwendet, die von der letzten Anfrage geladen wurden.

Ist dieses Problem mit NgZone lösbar? Kann ich diese Anfrage irgendwie in die Zone aufnehmen, wenn sie fertig ist, bewertet sie den Komponentenbaum neu?

Answer 1

Von Ihren Kommentaren denke ich, dass es nichts mit Zonen zu tun hat. Sie müssen Ihre sekundäre Komponente aktualisieren, wenn sich Ihre @ Input-Eigenschaften ändern.

export class SecondaryComponent { 

    private _myProperty: any; 
    @Input() 
    set myProperty(val: any) { 
     this._myProperty = val; 
     this.update(); 
    } 

    update() { //instead of ngOnInit just use this 
     //do stuff with _myProperty now 
    } 

} 

Warum können Sie nicht einfach an das Feld auth.userProfile innerhalb dieser sekundären Komponente binden? Sofern Sie die Daten nicht irgendwie in die sekundäre ngOnInit-Methode transformieren, wäre das wahrscheinlich einfacher.