重新路由到带有/用户数据 Angular 2 和 Firebase 的个人资料页面答案

【问题标题】：Reroute to a profile page w/user data Angular2 and Firebase重新路由到带有/用户数据 Angular 2 和 Firebase 的个人资料页面
【发布时间】：2017-02-08 11:08:08
【问题描述】：

我正在尝试在用户通过 Firebase 登录后设置个人资料页面路由。我的signin 组件包含profile 路由的路径。这里唯一的问题是我的配置文件组件包含来自 Firebase 数据库的用户数据。结果，当我被重定向到我的个人资料页面时，我收到Cannot read property 'uid' of null 的错误。

如果我在登录后刷新页面，那么我的个人资料页面不会出现任何错误。

我的signin.component.ts

  signInSubmit(){
    var self = this;
    firebase.auth().signInWithEmailAndPassword(self.signInForm.value.smail, self.signInForm.value.spassword).catch(function(error){
    console.log(error.message);
    });
    localStorage.setItem('confirmo', 'verdad');
    self.router.navigate(['profile']);
  }

我的profile.component.ts

ngOnInit(){
   var self = this;
   let user = firebase.auth().currentUser;  
   let userNamePath = `users/${user.uid}/username`;
   let notesPath = `users/${user.uid}/addnote`;

this.username$ = this.af.database.object(userNamePath);
this.addsnotes$ = this.af.database.list(notesPath);

function redis(){ 
   self.proshow = true; }
   setTimeout(redis, 3000);
}

为了尝试解决这个问题，我在显示我的个人资料组件之前设置了一个超时。但是，这不起作用。即使我将整个ngOnInit 放入超时函数中，也会出现同样的错误。

另外，如果有帮助，我的 profile.component.html 的一部分。

<h4>Welcome {{ (username$ | async)?.$value }}</h4>

【问题讨论】：

标签： angular firebase firebase-authentication

【解决方案1】：

答案竟然是万能的onAuthStateChanged。像这样：

profile.component.ts

ngOnInit(){
var self = this;
firebase.auth().onAuthStateChanged(function(user){
if (user){ 
var userNamePath = `users/${user.uid}/username`;
var notesPath = `users/${user.uid}/addnote`;

self.username$ = self.af.database.object(userNamePath);
self.addsnotes$ = self.af.database.list(notesPath);
self.proshow = true;
}
});

}

【讨论】：