Angular 4 und angularfire2 router navigieren, aber die vorherige Komponente zeigt immer noch

Question

Ich arbeite an einem Projekt mit Angular 4 und angularfire2 (Firebase), ich versuche, nach der Anmeldung des Benutzers erfolgreich mit einem zu der Homepage zu navigieren Dritte (Google oder Facebook).

Das Problem ist, nachdem der Benutzer mit angularfire2 Popup authentifiziert der Router ordnungsgemäß navigieren (Link im Browser ändern und die Home-Komponente sichtbar ist), aber die Anmeldung Komponente immer noch da !!

Ich bin mir nicht sicher, ob das Problem mit angularfire2 in Popups oder eckigen 4 selbst, irgendwelche Vorschläge verbunden ist?

angularfire2 Rückruf:

signInWithGoogle() { 
    this.angularFireAuth.auth.signInWithPopup(new 
    firebase.auth.GoogleAuthProvider()).then((infos) => { 
    this.router.navigate['/home']; 
    }); 
} 

Router config:

const memberSpaceRoutes: Routes = [ 
     { path: 'sign-in', component: SignInComponent }, 
     { path: 'home', component: Home}, 
] 

Answer 1

dieses pathMatch Versuchen: 'voll' in Ihrer Route Config

const memberSpaceRoutes: Routes = [ 
     { path: 'sign-in', component: SignInComponent, pathMatch: 'full' }, 
     { path: '/home', component: Home, pathMatch: 'full'}, 
] 

Answer 2

Ich bin über die Erklärung nicht sicher, aber Sie befinden sich außerhalb eines Kontexts, den eckig über (insbesondere eine Zone) wissen würde

Import NgZone und Verwendung in Ihrem dann

this.zone.run(() => {this.router.navigate['/home']}) 

Answer 3

Nun, Ihre ursprüngliche Frage bedenkt, scheint es, dass Sie nicht über ausreichende Informationen zur Verfügung gestellt haben, die Wurzel des Problems zu analysieren.

Es ist jedoch möglich, dass Ihr Code möglicherweise einen Laufzeitfehler verursacht hat. Wenn Ihr Code BrowserAnimationsModule verwendet, kann angular möglicherweise die vorherige Komponente nicht durch die neue ersetzen, sondern stattdessen die neue Komponente anhängen die Alten. Dies ist ein bekanntes Problem in Bezug auf das BrowserAnimationsModule von Angular 4. Sie können entweder den Laufzeitfehler aus Ihrem Code entfernen oder das BrowserAnimationsModule loswerden.

Sie können die Ausgabe Beschreibung bei Github check out: https://github.com/angular/angular/issues/19093

Answer 4

Es ist auch mir passiert ist. Die Lösung besteht darin, die router.navigate-Methode außerhalb der signInWithGoogle-Funktion auszulösen. Genauer gesagt: Der Grund dafür ist, dass signInWithGoogle eine Zusage zurückgibt, und wenn die Methode router.navigate in dieser Funktion ausgelöst wird, bevor das Versprechen vollständig aufgelöst wurde, wird die neue Komponente (Route) in die aktuelle Komponente eingebettet, was zu beiden Routen führt gerendert Sie möchten die router.navigate-Methode außerhalb der signInWithGoogle-Funktion und erst NACH dem Versprechen aktivieren, und es sollte funktionieren. Zumindest hat es für mich funktioniert.