Angular中的多个相同的异步管道导致多个http请求答案

【问题标题】：Multiple identical async pipe in Angular causing multiple http requestsAngular中的多个相同的异步管道导致多个http请求
【发布时间】：2019-05-23 15:17:56
【问题描述】：

在我的 Angular 应用程序中，我使用异步管道多次渲染组件

<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请求。

我怎样才能只使用一个请求？

【问题讨论】：

标签： angular rxjs

【解决方案1】：

方法一

您可以使用shareReplay 运算符。

在订阅时共享源并重放指定数量的排放。

import { shareReplay } from 'rxjs/operators';

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

方法二

您可以在控制器中订阅并在模板中使用该值。

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>

【讨论】：