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 中的 logout() 函数，然后设置 localStorage 变量，然后导航到登录组件并重新加载页面。

但我意识到有时页面会在 LoginService 中执行 logout() 函数之前重新加载，因此这不会为 localStorage 设置新值。如何更正代码以便按顺序执行？

谢谢！

Answer 1

任何时候您执行任何异步进程，例如您的注销，代码都将不按顺序执行。 .subscribe 方法的参数实际上是一个回调方法，将在未来某个未定义的时间回调。因此，确保代码仅在完成后才执行的唯一方法是从 in 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() 的用途。导航后不需要重新加载？