用户详细信息仅在刷新页面后显示

Question

以下是我在通过社交媒体帐户登录时显示用户姓名和邮件ID的代码：

.TS

constructor(private router: Router, public afAuth: AngularFireAuth) { 

this.afAuth.auth.onAuthStateChanged((user) => {
  if (user != null) {
    // User is logged in, use the user object for its info.
      this.isLoggedIn = true;
      this.user_displayName = user.displayName;
      this.user_email = user.email;
      console.log("Logged in");
      console.log(user);
      this.router.navigate(['']);

  } else {
    // User is not logged in, redirect to where you need to.
      console.log("Logged out");
      this.isLoggedIn = false;
      this.user_displayName = '';
      this.user_email = '';
      this.router.navigate(['login']);
    }
});
}

html的

<div *ngIf="isLoggedIn">
  <p class="navbar-text navbar-right">Logged In: {{user_displayName}} ({{user_email}})<p>
</div>
<div *ngIf="!isLoggedIn">
  <p class="navbar-text navbar-right">Logged Out</p>
</div>

现在登录后页面出现后，我需要刷新该页面以查看用户详细信息。如果我不刷新页面，它会一直显示Logged Out。只有刷新页面后才会显示详细信息。

我可以在登录后立即显示详细信息吗？没有刷新页面？

非常感谢任何帮助。感谢。