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

-1

我有一个angular2导航栏组件，它包括一个注销按钮：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() { 
    } 

}

我期望点击退出按钮时，首先在login服务注销（）函数将然后设置localStorage的变量，那么了解它们被执行到登录组件并重新加载页面。

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

谢谢！

来源

2017-09-11 Sonn

我建议你阅读如何处理RxJS和observables，否则你将在Angular中度过难关。这些方法是* asynchronous *，你不能让它逐行运行（就像在observables之前的promise和回调一样）。 – jonrsharpe

任何时候你执行任何异步过程，比如你的注销，代码将会按顺序执行而不是。 .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()是什么。导航后不需要重新加载？

来源

2017-09-11 20:39:09 DeborahK

嗨DeborahK，谢谢你的解决方案。我把location.reload（）放在那里，因为我想在导航后重新加载页面，如果不是，它只是导航而不刷新页面 – Sonn

我以前没有看到过。你真的需要重新加载整个页面吗？你可以重新加载页面的数据吗？这似乎违背了SPA的想法？ – DeborahK

其实我这里的意思是当用户注销时，一切都会清楚，页面也会刷新 – Sonn

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

回答

相关问题