角型ルータはコンポーネント間で初めて移動しません

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が非同期であり、あなたはそれを同期していないので、ルータはuserId前/challangeにナビゲートしているが、他につながるローカルストレージに設定されているが、初めてのリダイレクト。ただし、その時点で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']); 
}