Question

我有一个angular2 Navbar组件，其中包含一个注销按钮：

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变量，然后nagivate到login组件并重新加载页面。

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

谢谢！

Answer 1

每次执行任何异步过程（例如注销）时，代码都将不按顺序执行。 .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()的用途。导航后你不需要重新加载吗？

Angular2：如何确保执行将按行顺序运行？

1 个答案: