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路由器导航，但前面的组件仍然显示

回答

相关问题