angulaire 4 routage/problèmes d'état

Question

j'ai un fichier user.service.ts avec une méthode de connexion:

login(userName : string, password : string) { 
    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 

    return this.http 
     .post(
     this.baseUrl + '/auth/login', 
     JSON.stringify({ userName, password }),{ headers } 
    ) 
     .map(res => res.json()) 
     .map(res => { 
     localStorage.setItem('auth_token', res.auth_token); 
     this.loggedIn = true; 
     this._authNavStatusSource.next(true); 
     return true; 
     }) 
     .catch(this.handleError); 
    } 

qui est appelé par un bouton de connexion sur mon login-form.component.ts:

login({ value, valid }: { value: Credentials, valid: boolean }) { 
    this.submitted = true; 
    this.isRequesting = true; 
    this.errors=''; 
    if (valid) { 
     this.userService.login(value.email, value.password) 
     .finally(() => 
     this.isRequesting = false 
    ) 
     .subscribe(
     result => { 
      if (result) { 
      console.log("calling routing navigate"); 
      this.router.navigate(['/connect']); 
      console.log(this.userService.isLoggedIn()) 
      console.log("done"); 
      } 
     }, 
     error => this.errors = error); 
    } 
    } 
} 

Lorsque someones clics Connexion avec informations d'identification valides, le auth_token est créé sur le stockage local, et dans la console que je peux voir le résultat de:

console.log("calling routing navigate"); 
    this.router.navigate(['/connect']); 
    console.log(this.userService.isLoggedIn()) 
    console.log("done"); 

il est:

calling routing navigate 
true 
done 

Mais rien ne se passe sur la page. La page de connexion reste et les utilisateurs ne sont pas routés vers la page/connect, et le bouton de connexion sur la barre de navigation continue (même s'il est égal à! IsLogged). Puis, j'appuie sur F5 et tout va bien. Avez-vous des idées sur ce qui cause ce comportement?

Mes app.module.ts:

const appRoutes: Routes = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full' }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'register', component: RegistrationFormComponent }, 
    { path: 'login', component: LoginFormComponent }, 
    { path: 'logout', component: LogoutComponent}, 
    { path: 'connect', component: ConnectorComponent, canActivate: [AuthGuard]}, 
    { path: '**', redirectTo: 'home' } 
] 
@NgModule({ 
    declarations: [ 
     AppComponent, 
     LoginFormComponent, 
     LogoutComponent, 
     ConnectorComponent, 
     HomeComponent 
    ], 
    providers: [AuthGuard, ConfigService, UserService, AuthModule], 
    imports: [ 
     CommonModule, 
     HttpModule, 
     FormsModule, 
     DashboardModule, 
     AuthModule, 
     RouterModule.forRoot(appRoutes) 
    ] 
}) 

Answer 1

Problème résolu. Le problème n'était pas dans le routage, mais dans un BehaviorSubject.

Quand je routé vers /connecter, angulaire me réacheminé à /login car il ne sera pas détecté qui a été connecté.

Cela a été causé parce que j'ai fourni mon UserService deux fois, donc, je cherchais une deuxième instance de mon BehaviorSubject, conduisant à ces erreurs.

Merci à tous pour votre aide.