自动初始化BehaviorSubject来缓存全局数据

Question

简化的用例：

1. 我有带有多个模块的 Angular 应用程序，大多数（不是全部）模块使用机场列表，
2. 我想创建一个 global-cache.service.ts 并将机场列表缓存在BehaviorSubject 将作为 Observable 公开。我只想在用户登陆订阅该 Observable 的组件时初始化 BehaviorSubject （点击数据库）（而不是在服务控制器中初始化它）

这是起点，无法让它工作（请参阅 this.getAirpotsFromDB() 调用后的注释）：

global-cache.service.ts

airports: BehaviorSubject<string[]> = new BehaviorSubject(null);
get airports$(): Observable<string[]> {
  if (this.airports.getValue() == null) {
    //get list from db, and initialize the subject
    this.getAirportsFromDB();
    //**PROBLEM:** how do I return `this.airports.asObservable()` after it's initialized with data from the call above or return it from inside the call?
  }
  else{
    //list initialized, emit from subject (don't hit db)
    return this.airports.asObservable();
  }
}

getAirportsFromDB() {
  this.http.get<string[]>('/api/airports').subscribe((_result) => {
    this.airports.next(_result);
  });
}

myComponent1.ts

//imports global-cache.service but never subscribes to airports$ (service has many other arrays that are used here)
//User lands here first, `getAirportsFromDB()` never gets called, user goes to myComponent2

myComponent2.ts

...
airports$: any = this.globalCacheService.airports$;
//subscribed in html `airports$ | async`
...
//user lands here, `getAirportsFromDB()` is called, `airports` BehaviorSubject is initialized
//user then goes to myComponent3

myComponent3.ts

...
airports$: any = this.globalCacheService.airports$;
//subscribed in html `airports$ | async`
...
//`airports` BehaviorSubject emits last value (initialized in Component2). `getAirportsFromDB()` does not get called again

Answer 1

您可以尝试如下所示，只需使用 tap 运算符并将 http 请求的值保存在 BehaviorSubject 中，并从 getAirportsFromDB 返回 Observable

export class Service {

  airports: BehaviorSubject<string[]> = new BehaviorSubject(null);

  get airports$(): Observable<string[]> {
    return this.airports.getValue()
        ? this.airports.asObservable()
        : this.getAirportsFromDB();
  }

  getAirportsFromDB(): Observable<string[]> {
    return this.http.get<string[]>('/api/airports')
      .pipe(
        tap((_result) => this.airports.next(_result))
      )
  }
}

小更新：
第一次调用时不会返回BehaviorSubject observable，因此对 getter 的后续调用不会更新视图，因此您只能在将其用作缓存并且不想接收的情况下使用上面的代码任何更新

Answer 2

最终选择了 shareReplay(1);方法更简单，并且完全符合我的要求

global-cache.service.ts

airports$: Observable<string[]> = this.getAirportsFromDB();

getAirportsFromDB() {
  return this.http.get<string[]>('/api/airports').pipe(shareReplay(1));
}