角度路由器第一次不从组件导航到组件

Question

我希望在注册后从注册组件重定向到挑战组件。如果本地存储未设置到质询组件，它将重定向到注册组件。我的问题是它第一次注册时不会从注册导航到挑战组件。

challange.component.ts

ngOnInit() {
    if(localStorage.getItem('userId') != null) {
     ......
    }
    else{
      this.router.navigate(['/signup']);
    }

  }

signup.component.ts

signupNew() {
    this.signupService.doSignup(this.parameter);
    this.router.navigate(['/challange']);
}

signup.service.ts

doSignup(signParam : SignupParam) {
    this.signupCollection.add(signParam).then(ref => {
      localStorage.setItem('userId', ref.id);
      console.log(localStorage.getItem('userId'))
    }).catch(err => {
      console.log('Check your Internet connection...');
    })
  }

route.ts

export const appRoutes : Routes = [
    { path : 'signup', component : SignupComponent },
    { path : 'challange', component: ChallangeComponent},
    { path : 'feed', component: NewsFeedComponent},
    { path : 'items-initial', component: InitialItemComponent},
    { path: '', redirectTo: '/', pathMatch : 'full'}
];

Answer 1

我认为你的问题在这里：

this.signupService.doSignup(this.parameter);
this.router.navigate(['/challange']);

doSignup是异步的，您没有同步它，因此路由器在 /challange设置在本地存储中之前导航到userId ，导致另一个第一次重定向。但是，此时userId将在localStorage中。同步这些调用：

async doSignup(signParam : SignupParam) {
  // error handling omitted
  const ref = await this.signupCollection.add(signParam);
  localStorage.setItem('userId', ref.id);
}

async signupNew() {
  await this.signupService.doSignup(this.parameter);
  this.router.navigate(['/challange']);
}