Angular 4和angularfire2路由器導航，但前面的組件仍然顯示

我正在使用Angular 4和angularfire2（firebase）的項目，我試圖導航到用戶成功登錄後使用第三方（Google或Facebook）。Angular 4和angularfire2路由器導航，但前面的組件仍然顯示

問題是在用戶使用angularfire2彈出窗口路由器正確導航（瀏覽器中的鏈接變化和家庭組件可見）後，但登錄組件仍然存在！

我不確定問題是否與angularfire2登錄popoups或角4本身有什麼建議？

angularfire2回調：

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

路由器配置：

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

來源

2017-09-24 A.Chakroun

沒有想法的傢伙？ –

登錄後瀏覽器中的網址 –

試試這個pathMatch：在你的路由配置

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

來源

2017-09-25 11:36:41

我會試試看，謝謝。 –

它沒有幫助！ –

我不知道的解釋 '滿'，但你不在角度知道的背景之外（特別是區域）

導入NgZone和使用內再

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

來源

2017-10-12 09:01:02

好，考慮到你原來的問題，看來你可能沒有提供足夠的信息來分析你的問題的根源。

但是，您的代碼可能會引發一些運行時錯誤，並且如果您的代碼恰好使用BrowserAnimationsModule，那麼angular可能無法用新的代碼替換先前的組件，而是將新組件添加到舊的。這是一個已知問題，涉及Angular 4的BrowserAnimationsModule。您可以從代碼中消除運行時錯誤，或者刪除BrowserAnimationsModule。

您可以在github上檢查出的問題描述： https://github.com/angular/angular/issues/19093

來源

2017-11-23 16:32:00

它也發生在我身上。解決方案是在signInWithGoogle函數外觸發router.navigate方法。詳細信息：原因是signInWithGoogle返回一個承諾，並且在promise完全解析之前觸發此函數內的router.navigate方法時，新組件（路由）將嵌入到當前組件中，從而導致兩個路由渲染。您想要在signInWithGoogle函數外觸發router.navigate方法，並且只有在承諾解決後，它才能工作。至少它對我有效。

來源

2018-02-26 19:47:26 Manor

Angular 4和angularfire2路由器導航，但前面的組件仍然顯示

回答

相關問題