Angular2：実行が行単位で確実に実行されるようにするにはどうすればよいですか？

Question

私はログアウトボタンが含まれてangular2ナビゲーションバーコンポーネントを持っている：

import { Component, OnInit } from '@angular/core'; 
import { LoginService } from '../login.service'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'app-navbar', 
    templateUrl: './navbar.component.html', 
    styleUrls: ['./navbar.component.css'] 
}) 
export class NavbarComponent implements OnInit { 

    loggedIn: boolean; 

    constructor(private loginService: LoginService, private router : Router) { 
     if(localStorage.getItem('PortalAdminHasLoggedIn') == '') { 
      this.loggedIn = false; 
     } else { 
      this.loggedIn = true; 
     } 
    } 

    logout(){ 
     this.loginService.logout().subscribe(
      res => { 
       localStorage.setItem('PortalAdminHasLoggedIn', ''); 
      }, 
      err => console.log(err) 
      ); 

     this.router.navigate(['/login']); 
     location.reload(); 
    } 

    getDisplay() { 
    if(!this.loggedIn){ 
     return "none"; 
    } else { 
     return ""; 
    } 
    } 

    ngOnInit() { 
    } 

} 

何ログアウトボタンをクリックしたときに、私は期待することはまずLoginServiceでログアウト（）関数はnagivate、その後、のlocalStorage変数を設定して実行されますされますログインコンポーネントに送信し、ページをリロードします。

しかし私は、LoginServiceでlogout（）関数を実行する前にページが再ロードされることがあるので、localStorageに新しい値を設定しません。コードを修正して順番に実行するにはどうすればよいですか？

ありがとうございました！

Answer 1

ログアウトなどの非同期処理を実行すると、コードはでなく、が順番に実行されます。 .subscribeメソッドへの引数は、実際には未定義の未来の時間にコールバックされるコールバックメソッドです。したがって、コードが完了した後にのみコードが実行されるようにする唯一の方法は、 subscribeメソッド内のコードを呼び出すことです。

logout(){ 
    this.loginService.logout().subscribe(
     res => { 
      localStorage.setItem('PortalAdminHasLoggedIn', ''); 
      this.router.navigate(['/login']); 
      location.reload(); // <-- what is this for? 
     }, 
     err => console.log(err) 
     ); 


} 

そして、私はlocation.reload()が何のためにあるのか興味があります。ナビゲートした後にリロードする必要はありませんか？