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

Question

I am learning to Angular 6, and am trying to use Material Modals as a selector.

The modal returns an object with 3 mongoose id's : {userID: '', partyID: '', teamID:''}

These then set stored in localstorage all successfully.

my problem is :-

I want it so if the page loads initially and there is tokens in localstorage, it goes to either a welcome page, the song page or the admin menu.

BUT : it does not evaluate all the partyValues etc before it gets to the router.navigate section.

* my code *

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(['/'])
    }
  }

the console output is :-

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

I think it is not waiting for the services to respond before it continues to the next section.

Any help would be most welcome.

Dave

Answer 1

Try doing like this. Add the desired navigation inside the subscribe .

For an instance,

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)
  );

You clearly got it right by understanding the flow, saying that navigation doesn't wait until the response gets back from the server.

All you need to do is perform the navigation inside the subscribe so it is guaranteed that navigation happens after the response.

Hope this helps.