Угловая - принудительная перезагрузка компонента, когда наблюдаемый сбой? - PullRequest
Новая
       15

Угловая - принудительная перезагрузка компонента, когда наблюдаемый сбой?

0 голосов
/ 27 июня 2019

У меня проблема с приложением Angular, Firebase (и Ionic). Всякий раз, когда пользователь входит в систему, я автоматически изменяю содержимое в боковом меню, показывая его имя и фотографию, а также другие ссылки (например, удаляя ссылки для входа).

Вот соответствующие части моего кода:

app.component.html: 

<ion-app>
  <ion-split-pane when="lg">
    <ion-menu>
      <ion-content class="menu-content">
        <ion-list class="menu-list">
          <h3 *ngIf="user" class="center">{{user.first_name}} {{user.last_name}}</h3>

          <div *ngIf="!user" style="margin-top: 10px">
            <ion-item tappable button (click)="gotoPage('/login')">
              <ion-icon name="log-in" slot="start"></ion-icon>
              {{"LOG_IN" | translate}}
            </ion-item>
            <ion-item tappable="" button (click)="gotoPage('/signup')">
              <ion-icon name="add" slot="start"></ion-icon>
              {{"SIGN_UP" | translate}}
            </ion-item>
          </div>
          <!--other menus-->
        </ion-list>
      </ion-content>
    </ion-menu>

    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

app.component.ts: 

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  user: any = null;

  constructor(
    public fAuthService: FirebaseAuthService,
    public firebaseService: FirebaseService,
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.fAuthService.userObs.subscribe((user) => {
      console.log("observed user: " + user);
      if(!user) {
        this.user = null;
        return null;
      }

      this.firebaseService.getUserData(user.uid).then(userData => {
        this.user = userData.data();
      }, error => console.log(error, "getUserData in app.component"));
    });
  }
}

firebase-auth.service.ts 

export class FirebaseAuthService {
  userObs = this.afAuth.authState;
  currentAuthState = false;
  currentUserData = null;

  constructor( public afAuth: AngularFireAuth, public afs: AngularFirestore ){
    this.userObs.subscribe((user) => {
      this.currentAuthState = !!user;

      if (user) {
        this.afs.collection('/users').doc(user.uid).ref.get().then(
          res => {
            this.currentUserData = res.data();
          }
        );
      }
      else {
        this.currentUserData = null;
      }
    });
  }

  doRegister(value) {
    return new Promise<any>((resolve, reject) => {
      firebase.auth().createUserWithEmailAndPassword(value.email, value.password)
        .then(res => {
          console.log(res);
          resolve(res);
        }, err => reject(err));
    });
  }

  doLogin(value) {
    return new Promise<any>((resolve, reject) => {
      firebase.auth().signInWithEmailAndPassword(value.email, value.password)
        .then(res => {
          resolve(res);
        }, err => reject(err));
    });
  }

  doLogout() {
    return new Promise((resolve, reject) => {
      if (firebase.auth().currentUser){
        this.afAuth.auth.signOut();
        resolve();
      }
      else {
        reject();
      }
    });
  }
}

Проблема в том, что иногда (редко, и часто с первой попытки) меню, кажется, не замечает, что пользователь подключен, не реагируя на его userObs.subscribe.

Кроме того, я бы хотел, чтобы он автоматически перезагружался, если я что-то изменил в данных пользователя. Таким образом, я думал о «запуске» наблюдаемой userObs, чтобы ее подписчики переделывали соответствующий код.

Итак, два вопроса: - Почему мое меню не всегда перезагружается? Состояние гонки? - Как заставить вызвать эту перезагрузку / обновление наблюдаемого?

...