Вид отображается перед загрузкой типа пользователя из магазина

Question

Итак, я создаю приложение Ionic - Angular, в котором пациент больницы отправляет запрос медсестре, а медсестра может видеть назначенные им запросы (в зависимости от комнаты, назначенной пациенту, отправляющему запрос).Медсестра может видеть все запросы, а пациент - только свои запросы.У меня есть функция в auth.service.ts, которая вызывается (setUserType ()) после того, как пользователь вошел в систему вручную или если это автоматический вход в систему (токен сохранен и найден) и извлекает тип и имя пользователя после его завершения.Аутентификация.

Проблема в том, что в my-запросы.page.ts в NgOnInit я вызываю функцию в службе запросов, которая запускает запрос для получения всех запросов (если это медсестра) или только для выборкизапросы пользователя (если это пациент) в зависимости от типа пользователя, который я назначил после входа в систему / автоматического входа.Это поле не назначается после рендеринга my-запросы.page.html, и я не могу найти способ сделать его рендерингом только после того, как у меня есть информация о типе пользователя.

setUserType () function:

    let userId: string;
    this.userIdObservable.subscribe(x => {
      userId = x;
    });
    const userQuery = this.firestore.doc<Users>(`added-users/${userId}`);
    userQuery.valueChanges().subscribe(x => {
      this._userType = x.type;
      this._userName = x.name;
    });

Мои запросы Функция ngOnInit:

      ngOnInit() {
    this.segment.value = 'progress';
    this.requestSubscription = this.requestsService
      .loadRequests()
      .subscribe(requests => {
        this.requestsList = requests;
      });
  }

Теперь все функции аутентификации -

Страница аутентификации Функция аутентификации:

    authenticate(email: string, password: string) {
    this.isLoading = true;
    this.loadingCtrl
      .create({
        keyboardClose: true,
        message: 'Logging in...'
      })
      .then(loadingEl => {
        loadingEl.present();
        let authObs: Observable<AuthResponseData>;
        if (this.isLogin) {
          authObs = this.authService.login(email, password);
        } else {
          authObs = this.authService.signup(email, password);
        }
        authObs.subscribe(resData => {
          console.log(resData);
          this.isLoading = false;
          loadingEl.dismiss();
          this.authService.setUserType();
          this.router.navigateByUrl('/requests/tabs/add-requests');
        }, errRes => {
          loadingEl.dismiss();
          const code = errRes.error.error.message;
          let message = 'Could not sign you up, please try again.';
          if (code === 'EMAIL_EXISTS') {
            message = 'This Id exists already!';
          } else if (code === 'EMAIL_NOT_FOUND') {
            message = 'No such user.';
          } else if (code === 'INVALID_PASSWORD') {
            message = 'Could not log you in, please try again.';
          }
          this.showAlert(message);
        });
      });
  }

Сервис аутентификациифункция входа в систему:

      login(email: string, password: string) {
    return this.http
      .post<AuthResponseData>(
        `https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=${
          environment.firebaseAPIKey
        }`,
        { email: email, password: password, returnSecureToken: true }
      )
      .pipe(tap(this.setUserData.bind(this)));
  }

Функция автоматического входа в службу аутентификации:

    autoLogin() {
    return from(Plugins.Storage.get({ key: 'authData' })).pipe(
      map(storedData => {
        if (!storedData || !storedData.value) {
          return null;
        }
        const parsedData = JSON.parse(storedData.value) as {
          token: string;
          tokenExpirationDate: string;
          userId: string;
          email: string;
        };
        const expirationTime = new Date(parsedData.tokenExpirationDate);
        if (expirationTime <= new Date()) {
          return null;
        }
        const user = new User(
          parsedData.userId,
          parsedData.email,
          parsedData.token,
          expirationTime
        );
        return user;
      }),
      tap(user => {
        if (user) {
          this._user.next(user);
          this.setUserType();
        }
      }),
      map(user => {
        return !!user;
      })
    );
  }

Answer 1

Это то, как вы можете сделать так, чтобы вам не приходилось включать его в любой модуль. Cli сделает это за вас.

import {Component, Injectable, OnInit} from '@angular/core';
import {BehaviorSubject} from 'rxjs';
import {FormGroup} from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class UserStateService {
  private user = new BehaviorSubject({
    isLoggedIn: false,
    userType: null
  });

  constructor() {
  }

  setUser(user) {
    this.user.next(user);
  }

  getUser() {
    return this.user;
  }
}

// my request 

@Component({
  selector: 'request-component',
  templateUrl: './request-component.html'
})
export class RequestComponent implements OnInit {
  constructor(private userStateService: UserStateService) {}

  ngOnInit(): void {
    this.userStateService
      .getUser()
      .subscribe(
      ((val: {isLoggedIn: boolean, userType: any}) => {
        // calll you service
      }));
  }
}

// in your auto login or login you call setter

this.userStateService.setUser({isLoggedIn: true, userType: 'data from login'});