Question

我正在使用Angular 4和angularfire2（firebase）进行项目，我试图在用户使用第三方（Google或Facebook）成功登录后导航到主页。

问题是在用户使用angularfire2弹出窗口进行身份验证后，路由器正常导航（浏览器中的链接更改并且主组件可见）但是登录组件仍在那里!!

我不确定问题是否与angularfire2签到popoups或angular 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},
]

Answer 1

我不确定这个解释，但你不在角度所知的背景之外（特别是一个区域）

导入NgZone并在然后

中使用

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

Answer 2

尝试此路径匹配：＆＃39;完整＆＃39;在你的路线配置

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

Answer 3

好吧，考虑到你原来的问题，似乎你可能没有提供足够的信息来分析问题的根源。

但是，您的代码可能会抛出一些运行时错误，如果您的代码碰巧使用了BrowserAnimationsModule，那么angular可能无法用新的组件替换以前的组件，而是将新组件添加到旧的。这是一个已知问题，涉及Angular 4的BrowserAnimationsModule。您可以从代码中消除运行时错误，或者摆脱BrowserAnimationsModule。

您可以在github上查看问题说明： https://github.com/angular/angular/issues/19093

Answer 4

这也发生在我身上。解决方案是在signInWithGoogle函数之外触发router.navigate方法。更多细节：原因是signInWithGoogle返回一个promise，当在promise完全解析之前触发此函数中的router.navigate方法时，新组件（路径）将嵌入到当前组件中，这会导致两个路径都被渲染。您希望在signInWithGoogle函数之外触发router.navigate方法，并且只有在解析了promise后，它才能正常工作。至少它对我有用。

Angular 4和angularfire2路由器导航但前一个组件仍在显示

4 个答案: