Angular2 Set-Variable auf abonnieren funktioniert nicht

Question

Ich bin ziemlich neu zu angular2, aber ich habe versucht, eine Login-Komponente zu schreiben. Alles funktioniert gut, außer nach einer erfolgreichen Anmeldung Ich möchte den Benutzernamen und das Passwort in meinem Sitzungsdienst (wo ich den Benutzernamen und das Passwort speichern, um grundlegende Auth-Header erstellen). Leider this._session.loggedIn wird nie eingestellt. Jemand eine Idee warum?

export class LoginComponent { 

    public email = ''; 
    public password = ''; 

    constructor(
     private _router: Router, 
     private _auth: AuthenticationService, 
     private _session: SessionService) { 
    } 

    login() { 
     this._auth.login(this.email, this.password) 
      .subscribe(
       data => { 
        this._session.currentProfile = data; 
        this._session.loggedIn = true; 
        this._router.navigate(['Home']); 
       }, 
       err => {} 
      ); 
    } 
} 

AuthenticationService:

login(email, password){ 
     return this._http.get('/profile') 
      .map(res => res.json()); 
} 

Answer 1

Dieser Code eine Funktion subscribe

 data => { 
      this._session.currentProfile = data; 
      this._session.loggedIn = true; 
      this._router.navigate(['Home']); 
     } 

Dieser Code ausgeführt wird, nicht sofort, aber manchmal später übergeben wird, wenn die Antwort vom Server kommt oder was auch immer Ereignis ist notwendig, damit das Observable ein neues Ereignis aussendet, das dann bewirkt, dass die obige Funktion aufgerufen wird.

Das bedeutet

login() { 
    this._auth.login(this.email, this.password) 
     .subscribe(
      data => { 
       this._session.currentProfile = data; 
       this._session.loggedIn = true; 
       this._router.navigate(['Home']); 
      }, 
      err => {} 
     ); 
    // <<== at this point above code hasn't been executed yet and no values are set 
} 

Wenn Sie Code müssen ausgeführt werden, wenn die Daten ankommen, müssen Sie es in den Rückruf bewegen.

Wenn der Anrufer von login Zugriff auf die empfangenen Daten benötigt, muss er ebenfalls warten, bis die Daten eintreffen. Sie können dies erreichen, indem die beobachtbaren

Rückkehr

login() { 
    return this._auth.login(this.email, this.password) 
     .map(
      data => { 
       this._session.currentProfile = data; 
       this._session.loggedIn = true; 
       this._router.navigate(['Home']); 
      } 
     ); 
} 

Sie nicht subscribe in diesem Fall benutzen kann, weil es eine Subscription zurückgibt. Wenn Sie map stattdessen verwenden, dann wird ein Observable zurückgegeben, die vom Anrufer verwendet werden kann, wie

this.login().subscribe(data => this.doSomething()); 

diese Weise, wenn doSomething() genannt wird, _session.currentProfile, _session.loggedIn gesetzt und router.navigate() aufgerufen wurde.

Die Async-Ausführung muss immer korrekt verkettet werden und es gibt keine Möglichkeit, die Ausführung eines Async-Aufrufs zu synchronisieren.