Служба Не определена на refre sh в Angular 9 Приложение с резольвером в маршрутизации

Question

У меня есть компонент, который загружает пользовательские данные и должен иметь возможность обрабатывать прямой доступ через url. Моя идея заключалась в том, чтобы реализовать в маршрутизаторе службу распознавателя, которая уже отлично работает при доступе к компоненту через маршрутизацию через приложение. Но если я обновляю sh приложение по URL-адресу, служба распознавателя выдает следующую ошибку:

ERROR Error: «Не перехвачено (в обещании): TypeError: this.userService.getCurrentUser () не определено

Похоже, что userService инициализируется недостаточно быстро при обновлении.

Это сервис распознавателя:

@Injectable({
  providedIn: 'root'
   })
export class UserResolverService {

 constructor(private userService: UserService, private authService: AuthService, private router:Router) { }

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<User> | Observable<never> {
let id = route.paramMap.get('id');


 //return this.authService.checkToken().subscribe(res => {
if(this.authService.checkToken()){
  return this.userService.getCurrentUser().pipe(take(1), mergeMap(user => {
    if(user){
      return of(user);
    } else {
      this.router.navigate['/login'];
      return EMPTY;
    }
  }));
} else {
  this.router.navigate['/login'];
      return EMPTY;
}

 }

 }

Это метод UserService, который называется:

getCurrentUser(): Observable<User>{
if(this.currentUser.value != null){
  return this.currentUser.asObservable().pipe(filter(user => user != null));
} else {
  this.setCurrentUser().subscribe(res => {
    return this.currentUser.asObservable().pipe(filter(user => user != null));
  })
}

Метод get setCurrentUser () вызывает бэкэнд с учетными данными для получения данных пользователя.

Конструктор Компонента, который должен иметь возможность загружать свои данные при обновлении, содержит следующее:

this.route.data.subscribe((data: {user: User}) => {
  this.user = data.user;
  this.initialDialogWindows();
  this.initialViewGuidingVariables();
});

EDIT:

Я изменил его на предлагаемое решение Aaka sh Garg. Теперь методы ngOnit () получают только undefined, а резолвер, похоже, не ждет обещаний. Ни один из журналов консоли, кроме «Я вообще здесь?», не выполняется.

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<User> {
let id = route.paramMap.get('id');


 //return this.authService.checkToken().subscribe(res => {
if(this.authService.checkToken()){
  console.log("am I even here?");
   this.userService.getCurrentUserPromise().then(user => {
     console.log("resolved user:" + user);
    if(user){
      return of(user);
    } else {
      console.log("navigating to login");
      this.router.navigate['/login'];
      return EMPTY;
    }
  });
} else {
  console.log("navigating to login, because there is no token");
  this.router.navigate['/login'];
      return EMPTY;
}

 }

Answer 1

Проблема не в инициализации службы, а в том, как написан ваш метод getCurrentUser. потому что в случае, если currentUser.value имеет значение null, он не будет ждать завершения подписки и вернет undefined. вот как работают задачи asyn c. измените свой метод getCurrentUser на: -

    async getCurrentUser(): Promise<User>{
      if(this.currentUser.value != null){
        return this.currentUser.asObservable().pipe(filter(user => user != null)).toPromise();
      } else {
        await this.setCurrentUser().toPromise();
        return await this.currentUser.asObservable().pipe(filter(user => user != null)).toPromise();
      }
    }

И измените свой преобразователь на: -

@Injectable({
  providedIn: 'root'
   })
export class UserResolverService {

 constructor(private userService: UserService, private authService: AuthService, private router:Router) { }

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<User> | Observable<never> {
let id = route.paramMap.get('id');


 //return this.authService.checkToken().subscribe(res => {
if(this.authService.checkToken()){
  this.userService.getCurrentUser().then(user => {
    if(user){
      return of(user);
    } else {
      this.router.navigate['/login'];
      return EMPTY;
    }
  });
} else {
  this.router.navigate['/login'];
      return EMPTY;
}

 }

 }