Angular 4 Routing/state Probleme

Question

Ich habe eine user.service.ts Datei mit einer Login-Methode:

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

, die von einem Login-Button auf meinem Login-form.component.ts genannt wird:

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

Wenn someones Klicks mit gültigen Anmeldeinformationen wird die auth_token auf lokalen Speicher erstellt, und in der Konsole kann ich sehen das Ergebnis aus:

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

es ist:

calling routing navigate 
true 
done 

Aber es passiert nichts auf der Seite. Die Anmeldeseite bleibt erhalten und die Benutzer werden nicht auf die Seite/connect weitergeleitet, und die Anmeldeschaltfläche der Navigationsleiste wird fortgesetzt (auch wenn sie gleich ist! IsLogged).

Dann drücke ich F5 und alles geht gut. Hast du irgendwelche Gedanken darüber, was dieses Verhalten verursacht?

Mein 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

Problem gelöst. Das Problem lag nicht im Routing, sondern in einem BehaviorSubject.

Als ich zu geleitet wird/connect, geroutet Angular mich zurück zu /login weil es nicht erkannt wird, die angemeldet wurde.

Dies verursacht wurde, weil ich meine Userservice zur Verfügung gestellt haben zwei mal, so suchte ich nach einer zweiten Instanz von meinem BehaviourSubject, die zu diesem Fehler führt.

Vielen Dank für die Hilfe.