Несколько идентичных асинхронных каналов в Angular, вызывающих несколько http-запросов

Question

В моем угловом приложении я использую асинхронную трубу для многократного рендеринга компонента

<app-main-chart  [type]="type" [name]="Name" [values]="values$ | async" [objectifs]="dataObjectifs"></app-main-chart>
...
...
<app-main-chart  [type]="type" [name]="Name" [values]="values$ | async" [objectifs]="dataObjectifs"></app-main-chart>

Проблема в том, что вызывает многократный http-запрос.

как я могу использовать только один запрос?

Answer 1

Метод 1

Вы можете использовать оператор shareReplay.

Поделиться источником и воспроизвести указанное количество излучений в подписке.

import { shareReplay } from 'rxjs/operators';

values$ = source
  .pipe(
    shareReplay()
  );

---

Метод 2

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

ngOnInit() {
  this.values$.subscribe(values => this.values = values);
}

Затем в шаблоне:

<app-main-chart [type]="type" 
                [name]="Name" 
                [values]="values" 
                [objectifs]="dataObjectifs">
</app-main-chart>

---

Метод 3

Вы можете обернуть его в ngIf блок:

<div *ngIf="values$ | async as values">
  <app-main-chart [type]="type" 
                  [name]="Name" 
                  [values]="values" 
                  [objectifs]="dataObjectifs">
  </app-main-chart>
  <app-main-chart [type]="type" 
                  [name]="Name" 
                  [values]="values" 
                  [objectifs]="dataObjectifs">
  </app-main-chart>
</div>