Выполнение одного вызова API и сохранение ответа в службе, чтобы другие компоненты могли использовать этот ответ без необходимости выполнения дополнительных вызовов API - PullRequest
Новая
       16

Выполнение одного вызова API и сохранение ответа в службе, чтобы другие компоненты могли использовать этот ответ без необходимости выполнения дополнительных вызовов API

0 голосов
/ 17 апреля 2019

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

Во всех этих случаях chartId одинаков, поэтому сервер возвращает тот же ответ. В 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 result;
}

В компоненте-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);
    });
}

1 Ответ

0 голосов
/ 17 апреля 2019

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

В файле chart.service.ts создайте поле 'chart'. 

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));
        }
   }

}

...