Angular 6 视图未更新为页面加载时的正确数据答案

【问题标题】：Angular 6 view not updating to correct data on page loadAngular 6 视图未更新为页面加载时的正确数据
【发布时间】：2019-02-17 21:04:41
【问题描述】：

我有这个 Angular 6 应用程序，我使用 Firebase 的 Google 登录实现了登录。我添加了一个按钮，当您注销时显示 Login，或者如果您已登录，按钮显示 Logout，它还显示您当前的电子邮件地址登录。

这是一个代码示例：

<p *ngIf="isLoggedIn()" class="text-white" style="margin-bottom: 0; padding-left: 10px">{{ afAuth.auth.currentUser.email }}</p>
<button *ngIf="!isLoggedIn()" class="btn btn-danger" type="button" (click)="login()">Log In</button>
<button *ngIf="isLoggedIn()" class="btn btn-danger" type="button" (click)="logout()">Log Out</button>

constructor(private afAuth: AngularFireAuth) {
}

isLoggedIn() {
  return this.afAuth.auth.currentUser;
}

login() {
  try {
    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
  } catch (e) {
    console.log(e.message);
  }
}

logout () {
  try {
    this.afAuth.auth.signOut().then(() => {
      this.hideAllViews();
    });
  } catch (e) {
    console.log(e.message);
  }
}

一切似乎都正常，除了如果您当前已登录并刷新页面，它似乎没有显示正确的状态，这意味着它显示登录按钮而不是显示您的电子邮件地址和注销按钮，因为您已经登录了。只要您点击标签或任何其他按钮或链接页面更新回显示电子邮件和注销 strong> 按钮。

在我看来，HTML 页面在检查 isLoggedIn() 方法之前就已加载。

我通过在构造函数中添加以下内容找到了解决方法：

setTimeout(function () {
},

请让我知道解决此问题的“Angular 方式”/最佳方式是什么。

【问题讨论】：

您可以将isLoggedIn() 移动到AfterViewChecked 方法中。它应该会有所帮助。
@DmitryS。我刚刚测试过，不幸的是它没有用。还有其他想法吗？
能否提供AngularFireAuth服务/组件的代码？
@DmitryS。我相信我已经有了。我基本上在构造函数中初始化它，然后在 isLoggedIn()、login() 和 logout() 中使用它
@DmitryS。另外，您的意思是在 ngAfterViewChecked() 中调用 isLoggedIn() 吗？

标签： javascript html angular

【解决方案1】：

您可以检查 onAuthStateChanged() 的回调并找出您的 var currentUser 何时初始化。

/* Don't forget ot import the firebase */
import * as firebase from 'firebase/app';

<p *ngIf="isLoggedIn()" class="text-white" style="margin-bottom: 0; padding-left: 10px">{{ afAuth.auth.currentUser.email }}</p>
<button *ngIf="!isLoggedIn()" class="btn btn-danger" type="button" (click)="login()">Log In</button>
<button *ngIf="isLoggedIn()" class="btn btn-danger" type="button" (click)="logout()">Log Out</button>

constructor(private afAuth: AngularFireAuth) {
}

/*Use callback to check when the variable is initialized*/
firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // If there is a user (a user is loggedIn), do something in that case
  } else {
    // Otherwise ...
  }
});

login() {
  try {
    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
  } catch (e) {
    console.log(e.message);
  }
}

logout () {
  try {
    this.afAuth.auth.signOut().then(() => {
      this.hideAllViews();
    });
  } catch (e) {
    console.log(e.message);
  }
}

【讨论】：

您是否建议将 onAuthStateChanged() 代码放在 isLoggedIn() 函数中？
@sbattou 是的，我建议将onAuthStateChanged 放在isLoggedIn 中。
我试过了，但是 subsribable 让我的应用程序崩溃，因为它总是在加载
onAuthStateChanged 的条件部分总是运行什么？实际上它很奇怪......另一个想法是将其移动到方法ngAfterViewInit或ng AfterViewChecked。
是的，它一直在运行，这导致我的应用在几秒钟后停止响应。我尝试将 isLoggedIn() 放在 ngAfterViewInit 和 ngAfterViewChecked 中，但没有成功。非常感谢您尝试帮助我，如果您有任何其他想法我可以尝试，请告诉我

【解决方案2】：

你所做的是一个很好的解决方法，但你应该实际使用的是life cycle hook(s) 例如：ngAfterViewInit

ngAfterViewInit() {
   this.isLoggedIn();
}

【讨论】：