Angular ngOnInit 的问题

Question

我有一个从离开我们组织的人那里继承的应用程序。 我遇到了 ngOnInit 没有按照我认为的方式工作的问题。 我对 Angular 和 Observables 还是很陌生

当我导航到它进入 ngOnInit 方法的组件时，我可以在控制台中看到，我没有看到订阅正在执行的响应中的 console.info 语句。 进入组件后，我可以刷新页面，然后我可以在订阅中看到 console.info 语句。

我的问题是为什么我第一次导航到组件时看不到 console.info 语句？

组件 ngOnInit() 方法

    ngOnInit(): void {

      console.info('Entering ngOnInit - Home Component');

      this.profile.getProfile().subscribe((resp) => {

          this.currentUser = this.local.getObject(StorageItems.UserProfile) as IMSALUserProfile;

          console.info('Current User: ', + JSON.stringify(this.currentUserInit));
      });
    }

这就是我的服务的样子，它是一个使用 MSAL 从 Azure Active Directory 获取用户配置文件信息的服务。

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BaseService } from './base.service';
import { AuthError } from '@azure/msal-browser';
import { LoggerService } from './logger.service';
import { Observable, of } from 'rxjs';
import { IMSALUserProfile } from '../../shared/interfaces/msaluserprofile';
import { SessionService } from './session.service';
import { StorageItems } from '../../shared/interfaces/enums/storage.model';
import { LocalStorageService } from './local-storage.service';
import { UserService } from './user.service';
import { IUserInit } from '../../shared/interfaces/userinit';

@Injectable({
  providedIn: 'root'
})
export class UserProfileService extends BaseService {

  currentUser!: IMSALUserProfile;
  currentUserInit!: IUserInit;

  constructor(private http: HttpClient, 
      private logger: LoggerService, 
      private session: SessionService,
      private local: LocalStorageService, 
      private userInit: UserService) {
    super();
  }

  public getProfile(): Observable<IMSALUserProfile> {

    let sessionUser = this.session.getItem(StorageItems.UserProfile);

    if (sessionUser.length !== 0) {
      this.currentUser = JSON.parse(this.session.getItem(StorageItems.UserProfile));
    }

    let profile!: IMSALUserProfile;

    if (this.currentUser) {
      
      profile = this.currentUser as IMSALUserProfile;
    } else {
      this.http.get('https://graph.microsoft.com/v1.0/me')
      .subscribe({
        next: (profile) => {
          profile = profile;

          this.local.setItem(StorageItems.UserProfile, profile);
          this.session.setItem(StorageItems.UserProfile, JSON.stringify(profile));

          this.currentUser = profile as IMSALUserProfile;
        },
        error: (err: AuthError) => {
          console.info('Authentication error');
        }
      })
    }

    this.local.setItem(StorageItems.UserProfile, profile);
    this.session.setItem(StorageItems.UserProfile, JSON.stringify(profile));

    return of(profile);
  }
}

Answer 1

当配置文件刚刚未定义时，您将返回 of(profile)。如果this.currentUser 不存在，并且else 块被执行，您正在尝试异步设置您的返回值。该函数可能在 http.get 完成之前返回。

您可能希望返回 http 请求并通过一些 RxJS 操作符将其通过管道传递给 else 块中的订阅，而不是订阅服务。