Почему angular отправляет запрос от каждого дочернего компонента?

Question

У меня есть Parent component, который отправляет запрос в api и получает объект Observable со списком продуктов. Этот объект передается на четыре Child components. Проблема в том, что каждые Child component отправляют запрос в api (всего 4). Как я могу сделать так, чтобы он отправлял только один запрос от Родителя и передавал производственный список дочерним элементам?

Родительский компонент:

  private productions: Observable<Array<Production>>;

      ngOnInit(): void {
           this.productions = this.productionService.getProductionList();
        }

Пример дочернего компонента:

  @Input()
  productions: Observable<Array<Production>>;

      ngOnChanges(changes: SimpleChanges) {
        
          this.productions.subscribe(res => {
    
              // Do something with response body
    
        })
      }

Консольная сеть и 4 запроса от детей

Answer 1

На данный момент переменная this.productions содержит холодную наблюдаемую. Таким образом, каждая подписка будет вызывать отдельные запросы. Есть несколько способов сделать наблюдаемое горячим, чтобы каждая подписка не вызывала запрос.

Самый быстрый способ - передать по конвейеру оператор shareReplay() с буфером 1 в источник наблюдаемый. Он создаст многоадресную рассылку, содержащую последнее переданное значение. После подписки буферизованное значение будет воспроизведено наблюдателям.

Попробуйте следующее

import { shareReplay } from 'rxjs/operators';

private productions: Observable<Array<Production>>;

ngOnInit(): void {
  this.productions = this.productionService.getProductionList().pipe(
    shareReplay(1)
  );
}

Answer 2

this.productionService.getProductionList() - это наблюдаемый объект, и .subscribe фактически вызовет запрос api.

Вы подписываетесь на каждый дочерний компонент, поэтому вы видите несколько запросов.

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

private productions: <Array<Production>>;

ngOnInit(): void {
  this.productionService.getProductionList()
    .pipe(first())
    .subscribe(productions => {
      this.productions = productions;
    });
}