Javascript 如何避免角度上的可观察延迟或确保只有在可观察就绪时才调用我的函数

我有一个登录函数，它调用Firebase SDK方法来通过电子邮件进行身份验证。Firebase方法返回非空的

UserCredential

，这在Firebase文档中是这么说的。所以我使用

.then（）

等待用户登录、验证，然后使用console.log记录他的信息并重定向到主页。不幸的是，它不起作用。我从

console.log（value.email）获取未定义的信息在控制台中，
不工作

if (this.userDetails) {
console.log("hello im user" + " " + email);
} else {
console.log("not working");
}

constructor(private _firebaseAuth: AngularFireAuth, private router: Router) {
    this.user = _firebaseAuth.authState;
    this.loggedIn = !!sessionStorage.getItem('user');

    this.user.subscribe(
        (user) => {
          if (user && user.uid) {
            this.userDetails = user;
            var email = this.userDetails.email;
            console.log("hello im user" + " " + email);
            this.setCurrentUser(email);
            this.loggedIn = true;
            console.log(this.userDetails);

          } else {
            this.userDetails = null;
          }
        }
      );
  }

和
errorTypeError:无法从以下位置读取未定义的属性“router”：

.catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      console.log("error" + error);
    });

然后在一两秒钟后，它最终开始工作，打印出
hello im userlajmis@mail.com
来自

if (this.userDetails) {
console.log("hello im user" + " " + email);
} else {
console.log("not working");
}

constructor(private _firebaseAuth: AngularFireAuth, private router: Router) {
    this.user = _firebaseAuth.authState;
    this.loggedIn = !!sessionStorage.getItem('user');

    this.user.subscribe(
        (user) => {
          if (user && user.uid) {
            this.userDetails = user;
            var email = this.userDetails.email;
            console.log("hello im user" + " " + email);
            this.setCurrentUser(email);
            this.loggedIn = true;
            console.log(this.userDetails);

          } else {
            this.userDetails = null;
          }
        }
      );
  }

和
this.userDetails

为什么会这样？以下是完整的代码：

export class AuthService {
  private user: Observable<firebase.User>;
  private userDetails: firebase.User = null;
  public loggedIn = false;

  constructor(private _firebaseAuth: AngularFireAuth, private router: Router) {
    this.user = _firebaseAuth.authState;
    this.loggedIn = !!sessionStorage.getItem('user');

    this.user.subscribe(
        (user) => {
          if (user && user.uid) {
            this.userDetails = user;
            var email = this.userDetails.email;
            console.log("hello im user" + " " + email);
            this.setCurrentUser(email);
            this.loggedIn = true;
            console.log(this.userDetails);

          } else {
            this.userDetails = null;
          }
        }
      );
  }

  // Set current user in your session after a successful login
    setCurrentUser(email: string): void {
        sessionStorage.setItem('user', email);
        this.loggedIn = true;
    }

    // Get currently logged in user from session
    getCurrentUser(): string | any {
        return sessionStorage.getItem('user') || undefined;
    }

    isLoggedIn() {
    return this.loggedIn;
    }

  logUserIn(email, pass) {
    firebase.auth().signInWithEmailAndPassword(email, pass).then(function(value) {

        console.log(value.email);
        this.router.navigate(['']);

    }).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      console.log("error" + error);
    });
if (this.userDetails) {
console.log("hello im user" + " " + email);
} else {
console.log("not working");
}
}

导出类身份验证服务{
私人用户：可观察；
private userDetails:firebase.User=null；
公共loggedIn=false；
构造函数（专用\u firebaseAuth:AngularFireAuth，专用路由器：路由器）{
this.user=\u firebaseAuth.authState；
this.loggedIn=！！sessionStorage.getItem（'user'）；
此文件为.user.subscribe(
（用户）=>{
if（user&&user.uid）{
this.userDetails=用户；
var email=this.userDetails.email；
log（“你好im用户”+“”+电子邮件）；
此.setCurrentUser（电子邮件）；
this.loggedIn=true；
console.log（this.userDetails）；
}否则{
this.userDetails=null；
}
}
);
}
//成功登录后在会话中设置当前用户
setCurrentUser（电子邮件：字符串）：无效{
sessionStorage.setItem（'用户'，电子邮件）；
this.loggedIn=true；
}
//从会话获取当前登录的用户
getCurrentUser（）：字符串|任意{
return sessionStorage.getItem（'user'）| |未定义；
}
伊斯洛格丁（）{
返回这个.loggedIn；
}
登录用户登录（电子邮件、通行证）{
firebase.auth（）{
console.log（value.email）；
这个.router.navigate（['']）；
}).catch（函数（错误）{
//在这里处理错误。
var errorCode=error.code；
var errorMessage=error.message；
console.log（“错误”+错误）；
});
if（this.userDetails）{
log（“你好im用户”+“”+电子邮件）；
}否则{
控制台日志（“不工作”）；
}
}
logUserIn
是非阻塞的-因此工作流将是


调用构造函数
调用
this.user.subscribe
调用
logUserIn
调用firebase.auth（）。使用Email和Password登录
如果（this.userDetails）
从firebase.auth（）接收响应。使用Email和Password登录
调用
。然后（函数（值）{
调用
this.router.navigate（['']）；
从
this.user.subscribe接收响应


因此，
控制台.log
将输出
不工作
，几秒钟后，
此.user.subscribe
接收
用户
对象

无法访问
路由器
，因为您没有使用
箭头功能
。请使用
箭头功能
来保持对
此
的访问

也许可以尝试以下工作流：

构造函数（私有\u firebaseAuth:AngularFireAuth，私有路由器：路由器）{
this.user=\u firebaseAuth.authState；
this.loggedIn=！！sessionStorage.getItem（'user'）；
这个用户
.subscribe（用户=>{
console.log（'构造函数用户：'+用户）；
此.updateUser（用户）；
});
}
updateUser（用户）{
if（user&&user.id）{
this.userDetails=用户；
var email=this.userDetails.email；
log（“你好im用户”+“”+电子邮件）；
此.setCurrentUser（电子邮件）；
this.loggedIn=true；
console.log（this.userDetails）；
}否则{
this.userDetails=null；
}
}
登录用户登录（电子邮件、通行证）{
firebase.auth（）.signiWithEmailandPassword（电子邮件，密码）
。然后（用户=>{
log（'logUserIn:'+user）；
此.updateUser（用户）；
这个.router.navigate（['']）；
})
.catch（错误=>{
//在这里处理错误。
var errorCode=error.code；
var errorMessage=error.message；
console.log（“错误”+错误）；
});
}

这样，
logUserIn
和
constructor
都可以在从Firebase接收用户对象时更新
userDetails

它还可以避免您在设置
this.userDetails
之前重定向。
您从哪里调用
logUserIn
呢？@sketchthat在login.component.ts中我有一个函数
login（）{this.auth.logUserIn（this.form.value.email，this.form.value.password）；}；
我调用
login（）
在我的表单中，通过将它绑定到
ngSubmit
不幸的是，它不起作用。我将
不起作用
转移到控制台，这意味着它跳过
。然后在
logUserIn（）
和
errorReferenceError:user未定义
。catch（）
我刚刚意识到我有
（值
并且它应该是
然后（用户
）。您将继续得到如上所述的
不工作
。因为
然后
是非阻塞的。如果要更改行为，您需要使用
等待/async
。