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

Question

我是Angular的新手，也有点迷茫。我正在尝试在一个angular应用程序中实现google sign on，但是我不能让它工作。其思想是显示登录按钮，一旦用户完成该按钮，刷新显示其数据和照片的组件。

我设法初始化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完成登录时更新组件。此外，使用订阅模型进行重构以避免不必要的更新的想法也很有趣，谢谢！