Angular 9 refre sh компонент после обратного вызова, полученного при обслуживании - PullRequest
Новая
       39

Angular 9 refre sh компонент после обратного вызова, полученного при обслуживании

0 голосов
/ 05 апреля 2020

Я новичок в Angular и тоже немного потерян. Я пытаюсь реализовать вход в Google в приложении angular, но не могу заставить его работать. Идея состоит в том, чтобы показать кнопку входа в систему и после того, как пользователь завершил ее, обновить sh компонент, показывающий его данные и фотографию.

Мне удалось запустить gApi и подписаться на события входа в систему, используя их методы. , но я не знаю, как заставить компонент перезагрузиться после вызова соответствующего слушателя. Я пытался использовать subject.AsObservable () -> подписка, чтобы попытаться справиться с этим, и даже если я знаю, что обратный вызов вызван, компонент не обновляется.

Друг сказал мне использовать 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;
      }
    }

любое предложение будет более чем приветствоваться.

спасибо !!

1 Ответ

0 голосов
/ 07 апреля 2020

Как @amakhrov предложил использовать ngZone.run (), я смог обновить компонент при завершении входа в Google API. Также была интересна идея сделать рефактор, чтобы избежать ненужных обновлений с использованием модели подписки, спасибо!

...