在服务上收到回调后，Angular 9刷新组件

Question

我是Angular的新手，也有些迷路。我正在尝试在有角度的应用程序中实现Google登录，但是我无法使其正常运行。想法是显示登录按钮，一旦用户完成登录按钮，刷新显示其数据和照片的组件。

我设法使用它们的方法来初始化gApi并订阅登录事件，但是我不知道如何在调用相应的侦听器后重新加载该组件。我一直在尝试使用subject.AsObservable（）-> subscription尝试处理此问题，即使我知道调用了回调，该组件也不会更新。

[一个朋友告诉我使用EventEmmitter来处理此问题，但是由于回调位于服务内部，并且我不需要重新加载父项，所以我不确定这是否可以工作。

另外，我正在阅读有关ngZones的信息，这可能会达到目的（但是我不确定这是否是一种反模式）。我在这里写下现在的代码。

header.html

<div *ngIf="this.loggedIn else showLogin">
    <p>{{this.getBasicProfile().getName()}}</p>
    <p>{{this.getBasicProfile().getEmail()}}</p>
    <img [src]="this.getBasicProfile().getImageUrl()"/>
</div>

<ng-template #showLogin>
    {{this.loggedIn}}
    <div class="g-signin2"></div>
</ng-template>

header.ts

    import { Component, OnInit, OnDestroy } from '@angular/core';
    import { GoogleService } from '../google.service'
    import { Subscription } from 'rxjs';

    @Component({
      selector: 'app-header',
      templateUrl: './header.component.html',
      styleUrls: ['./header.component.sass']
    })

    export class HeaderComponent implements OnInit, OnDestroy {
      constructor(protected google : GoogleService) { 

      }

      loggedIn: boolean = false;
      subscription : Subscription;

      getBasicProfile() {
          return this.google.getUserProfile();
      }

      ngOnInit(): void {
        this.subscription = this.google.loggedIn$.subscribe(loggedIn => {
          this.loggedIn = loggedIn;
        });

        this.google.init().then(() => {
          this.google.listenUserChanges();
        });
      }

      ngOnDestroy(): void {
        this.subscription.unsubscribe();
      }
    }

google.service.ts

    import { Injectable } from '@angular/core';
    import { BehaviorSubject, Subscriber } from 'rxjs';

    declare const gapi: any;

    @Injectable({
      providedIn: 'root'
    })

    export class GoogleService {
      private loggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

      auth: any;
      profile: any;
      loggedIn$ = this.loggedIn.asObservable();

      public init(): Promise<boolean> {
        let doInit = new Promise<boolean>((resolve, reject) => {

          gapi.load('auth2', () => {
            gapi.auth2.init({
              client_id: "XXXXXX.apps.googleusercontent.com",
              cookiepolicy: 'single_host_origin',
            }).then(auth => {
              this.auth = auth;
              resolve();
            });
          });

        });

        return doInit;
      }

      public listenUserChanges(): void {
        if (!this.isLoggedIn()) {
          this.auth.isSignedIn.listen(() => {
            this.getUserProfile()
          });
          this.auth.currentUser.listen(() => {
            this.getUserProfile()
          });
        }
      }

      public isLoggedIn(): boolean {
        if (this.auth) {
          let isLoggedIn = this.auth.isSignedIn.get();
          this.loggedIn.next(isLoggedIn);
          return isLoggedIn;
        }

        return false;
      }

      public getUserProfile(): any {
        if (this.auth && this.isLoggedIn()) {
          this.profile = this.auth.currentUser.get().getBasicProfile();
          return this.profile;
        }

        return null;
      }

      constructor() {
        this.auth = null;
      }
    }

任何建议都将受到欢迎。

谢谢！

Answer 1

正如@amakhrov建议使用ngZone.run（）一样，我可以在完成使用Google API的登录时更新组件。另外，使用订阅模型进行重构以避免不必要的更新的想法很有趣，谢谢！