Блог

Я хочу выполнить один вызов API и сохранить ответ в сервисе, чтобы данные, полученные из ответа, можно было использовать в нескольких компонентах без каких-либо дополнительных вызовов API.

Во всех этих случаях идентификатор диаграммы один и тот же, поэтому сервер возвращает тот же ответ. В ngOnInit компонента-1 вызов getChartDetail выполняется один раз. В том же компоненте вызов сервера выполняется снова, а также в компоненте 2, который не является связанным компонентом, вызов выполняется снова. Как бы я мог предотвратить несколько вызовов сервера и просто выполнить вызов один раз, сохранить данные в отдельной функции и просто вызвать функцию, у которой уже есть нужные данные?

Вот мой код

В компоненте службы диаграмм:

 getChartDetail(chartId){
   const url = 'test/someurl';
   return this.service.httpCall('get', url, null)
          .map(chart => this.processChart(chart));
}

processChart(chart) {
   const result = _.cloneDeep(chart);
   _.forEach(result.sections, (section) => {
        const subCategories= _.flatMap(section.categories, 'subCategories');
        _.assign(section, {
            subCategories,
            categories:undefined,
        });
   });
   return resu<
}
 

В компоненте-1

 ngOnInit() {
   this.chartService.getChartDetail(chartId).subscribe((chart) => {
       this.data= chart.data;
   });
}

notifyAction() {
    const chartCountries = this.chartService.getCountries();
    const chartRequests = this.chartService
                              .getChartDetail(chartId)
                              .concatMap(chart =>
                                  this.chartService.listResults(
                                      this.chart.chartType,
                                      this.chart.chartVersion,
                                  )
                               ));
    Observable.zip(chartRequests, chartCountries)
        .subscribe(([settings, countries]) =>
            this.chartScore = settings;
            this.chartEvents = countries;
        });
}
 

В компоненте-2

 toggleButton() {
    this.chartService.getChartDetail(chartId).subscribe((chart) => {
        this.chartprofileDetail(chart);
    });
}
 

Обязательно добавьте ChartService в массив поставщиков модулей, чтобы для всего модуля был создан один экземпляр.

В файле chart.service.ts создайте поле «диаграмма».

 import { of, Observable } from 'rxjs';
@Injectable()
public class ChartService {
    private _chart: any // used for caching the value - use your defined type instead 
                           of any
    getChartDetail(chartId):Observable<any> {
        if(!this._chart) {
             const url = 'test/someurl';
             return this.service.httpCall('get', url, null)
                 .map(chart => {
                     this._chart = chart;
                     return this.processChart(chart);
                  }
             );
        } else {
            return of(this.processChart(this._chart));
        }
   }
 

}