angular 6函数未按顺序执行所有代码行

Question

我正在学习Angular 6，并尝试使用Material Modals作为选择器。

模态返回一个带有3个猫鼬ID的对象：{userID：``，partyID：''，teamID：''}

然后将这些设置成功存储在本地存储中。

我的问题是：

我想要这样，如果页面最初加载且localstorage中有令牌，它将转到欢迎页面，歌曲页面或管理菜单。

但是：在进入router.navigate部分之前，它不会评估所有partyValues等。

*我的代码*

ngOnInit() {
    console.log('INTO Init ', this.userLoggedIn, this.teamLoggedIn, this.partyLoggedIn);
    this.evaluateTokens();
    console.log('OUT Init ', this.userLoggedIn, this.teamLoggedIn, this.partyLoggedIn);

  }

  evaluateTokens(){
    let user  = localStorage.getItem('user');
    let party = localStorage.getItem('party');
    let team  = localStorage.getItem('team');
    if(!!user){
      this._User.details(user).subscribe(
        data => { console.log('setting user values ');
          this.userValues = data;
          this.userLoggedIn = true;
          this.teamLoggedIn = false;
          this.partyLoggedIn = false;
        },
        err => console.log('User details error : ',err)
      );
    } else {
      if(!!team){
        this._Team.details(team).subscribe(
          data => { console.log('setting team values ');
            this.teamValues = data;
            this.teamLoggedIn = true;},
          err => console.log('Team details error : ',err)
        );
      }
      if (!!party){
        this._Party.details(party).subscribe(
          data => { console.log('setting party values '); 
            this.partyValues = data;
            this.partyLoggedIn = true;},
          err => console.log('Party details error : ',err)
        );
      }
    }
    console.log('After If Statements : ', this.userLoggedIn, this.partyLoggedIn, this.teamLoggedIn);
    if(this.userLoggedIn){
      console.log('go to admin');     
      this._router.navigate(['/admin']);
    } else if(this.partyLoggedIn || this.teamLoggedIn){
      console.log('go to song search');
      this._router.navigate(['/songSearch']);
    } else {
      console.log('No Token');
      this._router.navigate(['/'])
    }
  }

控制台输出为：

INTO Init  false false false  navbar.component.ts:74
After If Statements :  false false false navbar.component.ts:82
No Token navbar.component.ts:38
OUT Init  false false false core.js:3121
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
navbar.component.ts:67 setting party values

我认为在继续下一节之前，它不会等待服务响应。

任何帮助将是最欢迎的。

戴夫

Answer 1

尝试这样做。 添加里面的所需导航subscribe 。

例如

this._User.details(user).subscribe(
    data => { 
      this.userValues = data;
      this.userLoggedIn = true;
      this.teamLoggedIn = false;
      this.partyLoggedIn = false;
      this._router.navigate(['/admin']);
    },
    err => console.log('User details error : ',err)
  );

通过了解流程，您显然可以正确地做到这一点，并说导航不会等到响应从服务器返回后再进行。

您需要做的就是在subscribe执行导航，以确保导航在响应之后发生。

希望这可以帮助。