Angular 13中ngIf结合async管道未响应Google OAuth登录状态变更问题

问题原因 #

你遇到的视图不自动更新的核心原因是Google gapi 相关的异步回调执行在 Angular 的 NgZone 监听范围之外。
Angular 靠 Zone.js 监控全局异步事件（比如点击、HTTP 响应、定时器回调等），事件触发后自动跑变更检测更新视图。但 gapi 的加载回调、授权状态变更回调都是 Google SDK 单独触发的，没有被 Zone.js 捕获，所以就算你通过 BehaviorSubject 推送了新值，async 管道也感知不到变更，直到你点击页面触发了 Zone 能识别的事件，才会批量更新视图。
你之前用 ChangeDetectorRef 手动触发虽然能生效，但属于局部解决方案，容易引发组件状态不一致，才会影响 Material 组件的正常运行。 #

解决方案 #

1. 修正组件的服务注入问题 #

你当前的组件代码没有将 UserService 注入构造函数，模板无法直接访问 userService 实例，首先要补全注入：

// 组件逻辑代码修改
constructor(public userService: UserService) {
}

2. 用 NgZone 将 gapi 回调拉回 Angular 执行区域 #

这是最标准的全局解决方案，不需要手动修改每个组件的变更检测逻辑，也不会影响第三方组件运行。
修改 UserService 代码，注入 NgZone 并包裹所有 gapi 相关的回调逻辑：

import {Injectable, NgZone} from "@angular/core";
import { Observable, Subject, BehaviorSubject } from 'rxjs';

declare const gapi: any;

@Injectable()
export class UserService {

    public auth2: any;
    public isSignIn: boolean;
    private isSignInChange: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
    public isSignInObs: Observable<boolean> = this.isSignInChange.asObservable();

    // 注入NgZone
    constructor(private ngZone: NgZone) {
        this.isSignIn = false;
        this.isSignInChange.next(false);
        // 包裹gapi.load回调
        gapi.load('client:auth2', () => {
          this.ngZone.run(() => {
            this.googleInitClient();
          })
        });
    }

    private googleInitClient() {
        gapi.client.init({
            // 你的原有配置
        }).then( (res: any) => {
            // 包裹初始化成功后的所有逻辑
            this.ngZone.run(() => {
              gapi.auth2.getAuthInstance().isSignedIn.listen( (res: boolean) => {
                this.updateSigninStatus(res)
              });
              this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
            })
        }, (error: any) => {
            console.warn(error);
        });
    }

    public updateSigninStatus(isSignedIn: boolean) {
       this.isSignIn = isSignedIn;
       this.isSignInChange.next(isSignedIn);
    }

    public signIn() {
        gapi.auth2.getAuthInstance().signIn();
    }

    // 补充你缺失的signOut方法
    public signOut() {
      gapi.auth2.getAuthInstance().signOut();
      this.updateSigninStatus(false);
    }
}

修改后所有 gapi 回调的逻辑都会被 NgZone 捕获，触发正常的 Angular 变更检测，async 管道就能自动更新视图，也不会影响 Material 组件的运行逻辑。 #

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