同时显示不同组件负载的角度正确方法?

Question

在角度 7+ 网络应用程序中，我有一个页面，在这个页面上，我有 3 个不同的组件，我在ngOnInit()中发出 3 个不同的 HTTP 请求来计算组件输入。 当我发出请求时，我想显示每个组件的加载微调器。

我当前的解决方案是，我还有其他一些称为 load-component 的组件，这个加载组件需要 1 个布尔输入变量，如果加载为真，它会在其内部的组件上覆盖加载微调器。对于我有 3 个不同组件的页面，HTML 如下所示：

<div>
<loading-component [loading]="loadingcomponent1">
<component1 [input1]="input1"></component1>
</loading-component>
<loading-component [loading]="loadingcomponent2">
<component2 [input2]="input2"></component2>
</loading-component>
<loading-component [loading]="loadingcomponent3">
<component3 [input3]="input3"></component3>
</loading-component>
</div>

组件.ts：

loading1: false;
loading2: false;
loading3: false;
input1: null
input2: null
input3: null
ngOnInit() {
this.loading1 = true;
this.http.get(url1).subscribe(resp => {
this.input1 = resp
this.loading1 = false
})
this.loading2 = true;
this.http.get(url2).subscribe(resp => {
this.input2 = resp
this.loading2 = false
})
this.loading3 = true;
this.http.get(url3).subscribe(resp => {
this.input3 = resp
this.loading3 = false
})
}

我为 3 个不同的加载组件计算了 3 个不同的布尔变量。在 HTTP 请求之前设置 true，在响应之后设置 false。

我的问题：这是一个好方法还是有其他方法(更好)来处理这个问题？

附言。在我之前的项目中，我使用了相同的策略vue.js

Answer 1

其他策略是将可观察量转换为承诺