Angular正确的方式同时显示不同组件的加载？

Question

在angular 7+ web-app中我有一个页面，在这个页面上，我有3个不同的组件，我在ngOnInit()中制作3个不同的HTTP请求来计算组件输入。当我提出请求时，我想为每个组件显示加载微调器。

我目前的解决方案是，我有一些名为loading-component的其他组件，这个加载组件需要1个布尔输入变量，如果加载为true，它将加载微调器加载到其中的组件上。对于我有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>

component.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。

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

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

Answer 1

我不认为那会那么糟糕。毕竟你需要为你的案例中的每个组件保留一个标志和一个微调器。然而，它仍然可以被视为DRY违规，可以很容易地通过指令的力量来修复。您可以轻松创建一个结构指令，根据您提供的布尔绑定放置微调器。