Question

在angular 7+网络应用中，我有一个页面，在此页面上，我有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，可以通过指令的功能轻松修复。您可以轻松创建一个结构指令，根据您提供的布尔绑定来放置微调器。

角度正确的方式可以同时显示不同组件的负载？

1 个答案: