首页 文章

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

提问于
浏览 次
3

我正在使用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},
]
angular angularfire2

4 回答

  • 0

    我不确定这个解释，但是你在一个有角度的环境之外（特别是一个区域）

    导入NgZone并在 then 中使用

    this.zone.run(() => {this.router.navigate['/home']})
    回复于
  • 0

    尝试此路径匹配：路由配置中的“完整”

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

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

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

    你可以在github上查看问题描述：https://github.com/angular/angular/issues/19093

    回复于
  • 0

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

    回复于

相关问题