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

标签 angular angularfire2

我正在使用 Angular 4 和 angularfire2 (firebase) 开发一个项目,我试图在用户使用第三方(Google 或 Facebook)成功登录后导航到主页。

问题是在使用 angularfire2 弹出窗口对用户进行身份验证后,路由器正确导航(浏览器中的链接发生变化并且主页组件可见)但登录组件仍然存在!

我不确定问题是与弹出窗口中的 angularfire2 登录有关还是与 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 知道的上下文(特别是区域)

导入 NgZone 并在 then

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

关于Angular 4 和 angularfire2 路由器导航,但前一个组件仍在显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46393857/

相关文章:

unit-testing - angular2 单元测试 : how to test events with triggerEventHandler

Angular2提交表单值

Angular 路由器 : named outlets does not seem to work with relative routes nor in lazy loaded modules

angular - 无法使用 DocumentSnapshot 中的属性 data()

javascript - 在 typescript 中使用点运算符对嵌套方法进行类型转换

angular - 如何在 Angular 组件内提供/模拟 Angularfirestore 模块以通过默认测试?

angular - 如何使用 Angular Firestore 获取集合中的文档列表

javascript - 在 firebase 数据库中存储用户时出错

angular - 使用 Angular 2、jupyter 和 typescript 构建 docker 镜像

html - 无法访问html表中的数组元素