首页 文章

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

提问于
浏览 次
-1

我有一个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设置新值 . 如何更正代码以便按顺序执行？

谢谢！

angular typescript

1 回答

  • 1

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

    回复于

相关问题