获取和存储全局变量

Question

我正在为一个简单的概念而苦苦挣扎，我可以在 C# 中轻松实现，但在 Angular 中却不行。

我正在尝试将用户配置文件存储在我在每个组件中添加的服务中，因此每次加载/显示组件时我都不会获取配置文件。

所以，我创建了一个服务，其中构造函数获取用户配置文件，并将其保存在一个变量中，并为我的所有组件使用一个 getter。

我遇到的问题是，当组件调用 getter 时，变量尚未设置，因为服务尚未响应。这会导致未定义的错误并破坏组件，因为配置文件在组件的代码中至关重要。

在 C# 中，我会在获取配置文件时简单地放置 1 等待，以便其他一切都可以运行而无需等待，因为我知道数据在那里。

但在 Angular 中，我尝试过，但它似乎不起作用。

export class SharedService {
  private userProfile;
  constructor(private http: HttpService) {
    this.initProfile();
  }
  async initProfile(): Promise < void > {   
    this.userProfile =await this.http.getProfile().subscribe((data: any) => {
       //...
    }
  });

  getUserProfile() {
    return this.userProfile;
  }
} 

getprofile：

  getProfile() {
    return this.shttp.get(environment.apiEndpoint + 'Getprofile/', {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        Accept: '*/*'
      })
    });
  }

在组件中，当我调用 getUserProfile 函数时，服务会立即使用空的 userProfile 进行响应。

编辑： 我设法通过非常讨厌的代码 sn-p 获得所需的行为，但这应该清楚我要完成的工作。在我的 profile.component.ts 中：

async ngOnInit(): Promise<void>  {    
 while (this.profile == null) {
  await this.sharedService.sleep(500);
  this.profile = this.sharedService.getUserProfile();    
 }
 if (this.profile.isadmin){
  this.CalculateStuff();
 }
 //
 //imagine here even more code using the this.profile variable in if statements, 
 //cases, etc.
 //
}

睡眠功能

  sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

我必须编写一个睡眠函数来实现这一点，这对我来说是一个明确的信号，表明我做错了。这就是我在这里的原因。

Answer 1

另一种方法是使服务中的userProfile 成为可观察到的多播（例如带有缓冲区1 的RxJS ReplaySubject）。这样就不需要将 observables 与 Promise 混合在一起。

服务

import { ReplaySubject } from 'rxjs';

export class SharedService {
  private userProfile = new ReplaySubject<any>(1);

  constructor(private http: HttpService) {
    this.initProfile();
  }

  initProfile() {   
    this.http.getProfile().subscribe({
      next: (data: any) => {
        this.userProfile.next(data);           // <-- push the new profile
      },
      error: (error: any) => { }               // <-- handle error
  });

  getUserProfile(): Observable<any> {          // <-- return observable here
    return this.userProfile.asObservable();
  }
}

现在在组件中，您可以从服务订阅主题。此外，您可以使用 takeUntil 运算符和 Subject 在组件关闭/销毁时关闭打开的订阅。

组件

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export class SomeComponent implements OnInit, OnDestroy {
  public userProfile: any;
  private closed$ = new Subject<any>();

  constructor(private shared: SharedService) { }

  ngOnInit() {
    this.shared.getUserProfile().pipe(
      takeUntil(this.closed$)
    ).subscribe({
      next: (data: any) => {
        this.userProfile = data;
        // other statements that depend on `this.userProfile`
      }
    });
  }

  ngOnDestroy() {
    this.closed$.next();   // <-- close open subscription(s)
  }
}

Answer 2

你快到了。您正在等待的订阅不适用于 async / await。只需执行以下操作。只需将其转换为承诺，以便您可以await 它。

async ngOnInit(): Promise<void>  {  
  this.profile = await this.sharedService.getUserProfile().toPromise();    
 if (this.profile.isadmin){
  this.CalculateStuff();
 }
}

这个问题类似How exactly works this async-await method call? is it correct?

为您提供更多细节。您正在做的是将this.userProfile 分配给RXJS 订阅对象。这不会为您提供所需的价值。如果您想按照其中一个 cmets 中的建议继续使用 Rxjs。您可以在订阅块内为用户配置文件执行所有逻辑。

  this.http.getProfile().subscribe((userProfile: any) => {
       // do userProfile actions here
  });
  //Since subscribe is an async callback, anything outside that block will have userProfile undefined.

同样如前所述，RxJs 的基本知识将非常有用，可以解决您的许多早期问题。 https://www.learnrxjs.io/learn-rxjs/concepts/rxjs-primer