Angular调用Google+ API后ngIf页面不渲染问题求助

Hey there, I see exactly what's going on here. The issue is that Google's gapi library runs its callbacks outside of Angular's change detection zone, so when you update showArray inside the subscribe block, Angular doesn't pick up on the changes and doesn't re-render the view. That's why it works fine when you're not using the Google API—those changes happen within Angular's context, so change detection triggers automatically.

Let's fix this with two common approaches:

方法1：使用NgZone将回调包裹在Angular上下文内 #

NgZone helps Angular track async operations from external libraries. Here's how to update your component:

1. 首先在组件中注入NgZone：

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

constructor(private ngZone: NgZone) {}

2. 修改googleLogin方法，把属性更新的逻辑放在ngZone.run()里：

googleLogin() {
  this.logStatus.onSignIn().subscribe(() => {
    this.ngZone.run(() => {
      this.showArray.showMask = false;
      this.showArray.showLoginButton = false;
    });
  });
}

方法2：手动触发变更检测 #

如果不想用NgZone，也可以手动告诉Angular去检测变化：

1. 注入ChangeDetectorRef：

import { Component, ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

2. 在更新属性后调用detectChanges()：

googleLogin() {
  this.logStatus.onSignIn().subscribe(() => {
    this.showArray.showMask = false;
    this.showArray.showLoginButton = false;
    this.cdr.detectChanges();
  });
}

额外优化建议 #

另外，你也可以考虑在LogStatusService的onSignIn方法里就把Observable包装在NgZone中，这样所有使用这个服务的组件都不用重复处理：

import { Injectable, NgZone } from '@angular/core';
// ...其他导入

@Injectable()
export class LogStatusService {
  constructor(private ngZone: NgZone) {
    this.googleInit();
  }

  // ...googleInit方法不变

  onSignIn(element?): Observable<any> {
    return from(this.auth2.signIn()).pipe(
      tap((googleUser: any) => {
        const token = googleUser.getAuthResponse().id_token;
        localStorage.setItem(this.TOKEN, token);
      }),
      // 把流的处理包裹在Angular上下文内
      map(res => {
        this.ngZone.run(() => {});
        return res;
      })
    );
  }
}

这样修改后，Angular就能正确检测到showArray的变化，你的按钮切换应该就能正常工作了！

内容的提问来源于stack exchange，提问作者K.Syu