Observable не загружает данные при смене маршрутизатора - PullRequest
0 голосов
/ 06 апреля 2019

работа с Angular (v7.2) и Firebase Auth для создания простого веб-приложения с областью пользователей. Я установил приборную панель в отдельный модуль со своим собственным маршрутизатором. У меня есть служба, которая выполняет большую часть тяжелой работы для аутентификации, которая распределяется между всеми компонентами.

Я не уверен, что это лучший способ, но мой файл auth.service.ts выглядит следующим образом:

export class AuthService {
   private userData$ = new Subject();
   private userData;
   public userDataObs = this.userData$.asObservable();

   constructor(public afs: AngularFirestore, public afAuth: AngularFireAuth, public functions: AngularFireFunctions, public router: Router, public ngZone: NgZone) {
     this.afAuth.authState.subscribe((user) => {
       if(user) {
         this.userData = user;

         this.getCurrentUserAccessLevel().subscribe((result) => {
           let userAccessLevel = result.result;
           let userObj = {
             displayName: this.userData.displayName,
             email: this.userData.email,
             emailVerified: this.userData.emailVerified,
             phoneNumber: this.userData.phoneNumber,
             photoURL: this.userData.photoURL,
             uid: this.userData.uid,
             accessLevel: userAccessLevel
           }

           this.userData$.next(userObj);
         });

         localStorage.setItem('user', JSON.stringify(this.userData));
         JSON.parse(localStorage.getItem('user'));
       } else {
         localStorage.setItem('user', null);
         JSON.parse(localStorage.getItem('user'));
       }
     })
   }
...

Короче говоря, служба выбирает пользовательские данные из службы аутентификации Firebase и сохраняет их в свойстве userData. Затем он выбирает accessLevel, который является пользовательским утверждением в аутентификации Firebase, и объединяет его с некоторыми полями в userData для создания пользовательского объекта userObj. Затем userObj передается субъекту userData $, для которого есть наблюдаемые userDataObs.

Каждый компонент подписывается на userDataObs.

В главном dashboard.component.ts есть:

export class DashboardComponent {

  private userDataObs;
  private userData;
  private loaded: boolean = false;

  constructor(public authService: AuthService, public router: Router, public ngZone: NgZone) {
    this.authService.userDataObs.subscribe((data) => {
      this.userData = data;
      this.loaded = true;
    })
  }

}

, который просто подписывается на userDataObs в authService. В главном компоненте панели мониторинга есть меню с различными привязками router к другим компонентам, которые обслуживаются через выход-маршрутизатор в компоненте. Если я щелкаю ссылку на другой компонент, маршрут меняется, и компонент инициализируется, но наблюдаемое не загружается. Там нет сообщения об ошибке или что-нибудь - просто ничего:

приборная панель-profile.component.ts:

export class DashboardProfileComponent {

  private userDataObs;
  private userData;
  private loaded: boolean = false;
  private fileUploadEvent;
  private fileUploadProgress;
  private fileUploadURL;

  constructor(private authService: AuthService, private router: Router, private uploadService: UploadService) {
    console.log('constructor');
    this.authService.userDataObs.subscribe((data) => {
      this.userData = data;
      this.loaded = true;
      console.log('loaded');
    });
  }

Если, однако, я просто иду к маршруту, не нажимая на routerLink, он работает нормально.

Я полагаю, это как-то связано с разделением наблюдаемого? В идеале мне бы хотелось, чтобы дочерние компоненты каким-то образом наследовали наблюдаемое от dashboard.component, но из того, что я могу сказать, это невозможно, поэтому мне нужно настроить новую подписку.

Буду признателен за любую помощь! Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...