Google登录后按钮状态未自动更新问题求助

我来帮你分析一下这个问题，你遇到的情况其实是Angular变更检测和第三方库回调的常见冲突，再加上一个小笔误导致的：

问题根源 #

1. Angular变更检测未触发：Google SignIn的回调函数是在Angular的Zone（核心执行上下文）之外运行的。当你在回调里修改isLoggedOuts的值时，Angular并没有感知到这个变量变化，所以不会自动更新视图。而按下任意按键时，浏览器的键盘事件会触发Angular内部的变更检测，视图才会同步更新。
2. 变量名笔误：你的HTML模板里第二个*ngIf判断用的是!isLoggedOut，但组件里的变量实际是isLoggedOuts（多了一个s），这个错误会导致登出按钮的显示逻辑一开始就不正确。

修复步骤 #

1. 利用NgZone触发变更检测

首先需要把Google回调里的变量更新逻辑包裹到Angular的Zone中，确保变更检测能被触发：

• 先在组件顶部导入NgZone：

import { NgZone } from '@angular/core';

• 在组件构造函数中注入NgZone：

constructor(private ngZone: NgZone) { }

• 修改attachSignin方法里的回调部分，把变量更新代码放到ngZone.run()内：

public attachSignin(element) {
  console.log(this.auth2);
  this.auth2.attachClickHandler(element, {}, (googleUser) => {
    // 把更新逻辑包裹在ngZone.run中，强制触发Angular变更检测
    this.ngZone.run(() => {
      this.isLoggedOuts = false;
      const profile = googleUser.getBasicProfile();
      this.googleData.accessToken = googleUser.getAuthResponse().access_token;
      this.googleData.email = profile.getEmail();
      this.googleData.name = profile.getName();
      this.googleData.imageurl = profile.getImageUrl();
      this.googleData.id = profile.getId();
      this.googleData.provider = 'google';
    });
  }, (error) => {
    // alert(JSON.stringify(error, undefined, 2));
  });
}

2. 修正HTML模板里的变量名错误

把登出按钮区域的*ngIf判断里的变量名改成正确的isLoggedOuts：

<div *ngIf="!isLoggedOuts">
  <p>sdfd</p>
  <div id="googleBt"></div>
  <button class="btn mx-2" (click)="signOutForGoogle()">Logout</button>
</div>

验证效果 #

做完这两处修改后，重新测试Google登录流程：登录成功后，登录按钮应该会立刻消失，登出按钮自动显示，不需要再按任意按键触发视图更新了。

内容的提问来源于stack exchange，提问作者user8057332