如何使用 BehaviourSubjects 在 Angular 组件之间共享 API 调用的数据？

我目前正在构建一个 Angular 应用程序，在其中向 api 发出请求，并将响应映射到两个不同的数组。我可以在我的app.components.ts但我会根据我的需要制作新的组件。如何在组件之间共享数据以确保组件始终拥有最新数据，因为我还需要定期调用 API。

我在 SO 和一些 YouTube 视频上看到了一些答案，但我只是不完全理解它。

我的服务代码是

 url = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson'; 
  private _earthquakePropertiesSource = new BehaviorSubject<Array<any>>([]);
  private _earthquakeGeometrySource = new BehaviorSubject<Array<any>>([]);


  constructor(private readonly httpClient: HttpClient) {

  }


  public getEarthquakeData(): Observable<{ properties: [], geometries: []}> {
    return this.httpClient.get<any>(this.url).pipe(
      // this will run when the response comes back
      map((response: any) => {
        return {
          properties: response.features.map(x => x.properties),
          geometries: response.features.map(x => x.geometry)
        };
      })
    );
  }

它正在我的中使用app.component.ts如下：

 properties: Array<any>;
 geometries: Array<any>;

constructor(private readonly earthquakeService: EarthquakeService) {
  }

  ngOnInit() {
    this.earthquakeService.getEarthquakeData().subscribe(data => {
      this.properties = data.properties;
      this.geometries = data.geometries;
      this.generateMapData();
    });
  }

  generateMapData() {
    for (const g of this.geometries) {
      const tempData: any = {
        latitude: g.coordinates[0],
        longitude: g.coordinates[1],
        draggable: false,
      };
      this.mapData.push(tempData);
    }

任何帮助将不胜感激。

这是一个描述如何使用纯 RxJS 完成此操作的答案。另一种选择是使用 NgRx。

首先，您设置了两个主题。目的是让所有组件都订阅它们并在刷新时接收最新数据？

你应该使用ReplaySubject代替BehaviorSubject不过，因为你没有任何初始状态。由于数据作为一件事返回，我会使用一个主题。

首先，我将声明一个接口，以便更容易讨论数据类型。

地震数据.ts

export interface EarthquakeData {
  // TODO: create types for these
  geometries: any[]; 
  properties: any[];
}

在您的服务中，您可以通过自己的方法公开数据来分离检索和通知。

地震服务.ts

  url = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson'; 

  private _earthquakeData$ = new ReplaySubject<EarthquakeData>(1);

  constructor(private readonly httpClient: HttpClient) {}

  getEarthquakeData(): Observable<EarthquakeData> {
    // return the subject here
    // subscribers will will notified when the data is refreshed
    return this._earthquakeData$.asObservable(); 
  }

  refreshEarthquakeData(): Observable<void> {
    return this.httpClient.get<any>(this.url).pipe(
      tap(response => {
        // notify all subscribers of new data
        this._earthquakeData$.next({
          geometries: response.features.map(x => x.geometry),
          properties: response.features.map(x => x.properties)
        });
      })
    );
  }

所以现在，所有想要接收数据的组件都将订阅一个方法：

private destroyed$ = new Subject();

ngOnInit()
  this.earthquakeService.getEarthquakeData().pipe(
    // it is now important to unsubscribe from the subject
    takeUntil(this.destroyed$)
  ).subscribe(data => {
    console.log(data); // the latest data
  });
}

ngOnDestroy() {
  this.destroyed$.next();
  this.destroyed$.complete();
}

您可以在任意位置刷新数据：

refreshData() {
  this.refreshing = true;
  this.earthquakeService.refreshEarthquakeData().subscribe(() => {
    this.refreshing = false;
  });
}

DEMO: https://stackblitz.com/edit/angular-uv7j33