javascript - 多个组件同时访问相同的数据

Question

在我的 Angular 应用程序中，我有一个由 3 个不同组件组成的仪表板

1)左侧菜单组件

2)右侧菜单组件

3)让我们说核心组件

这三个都需要访问相同的 api 响应。 早些时候，我以这样的方式进行编码:当加载每个组件时，都会点击设置 api 并获取数据。因此，对于相同的数据，总共有 3 个 api 调用。 我想改变这个

我想访问 api 一次，并且数据必须在加载时可供所有三个组件使用。

我尝试了事件发射器，但 api 并没有受到攻击。

下面是 API 调用。

getUserSettings(): Observable<any> {
    var userSettUrl = this.baseUrl + this.ngAuth.getApiUrl('settings');
    let httpHeader = {
      headers: new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded'
      })
    };
    return this.http.get(userSettUrl, httpHeader)
      .map((res: any) => {
        var obj = res;
        return this.userSettings = obj.settings;
      });
  }

在每个组件 ngOnInit() 中添加订阅。 我想优化它

请指导

谢谢 什鲁蒂

Answer 1

优化的解决方案是创建一个缓存响应，因此您点击一次即可从其他组件中获取副本。如果 api 响应已经存在。我将分享我在 Angular 5 中使用的示例。

  //In service
    cacheCommonSuccess$: Observable<any>;

     public getSuccessCommonMsg() {
        if (!this.cacheCommonSuccess$) {
          this.cacheCommonSuccess$ = this.requestSuccessCommonMsg();
        }
        return this.cacheCommonSuccess$;
      }



   private requestSuccessCommonMsg() {
    const url = this.API_BASE_URL + '/api/successmessages.json';
    return this.http.get(url).pipe(
      map(response => response[0]), shareReplay()
    );
  }


//In all three components 



 // To get stored success msgs from shared component
  getSuccessCommonMsgs() {
    this._SharedServiceService.getSuccessCommonMsg().subscribe(res => {
      this.apiResponseGSuccess = res;      
    });
  }

或者，如果可能的话，您可以在父组件中调用此 api 并将其传递给所有子组件(例如在 React js 中)。