我的问题是如何在我的所有异步 http 请求完成之前显示加载微调器。这样,在从服务器接收到所有数据之前,我不会显示屏幕的点点滴滴。
我最大的问题是我有一些组件是通过 html 专门触发的,所以当我想显示它时,我不能简单地将 *ngIf
语句放在 html 的一部分上。
这是我目前所拥有的。仅供引用,当其中一个 http 请求在此组件中完成时,会设置当前触发 html 可见性的模板变量。我想在显示 html 之前等待子组件的 http 请求完成,但我必须执行 html 中的逻辑才能调用子组件。
*ngIf
语句目前没有以我希望的方式工作,我只是展示我目前正在做的事情。
<div class="col-sm-12"
*ngIf="Template">
<div id="nav" style="height: 200px">
<div id="outer"
style="width: 100%">
<div id="inner">
<o-grid>
</o-grid>
</div>
</div>
</div>
<collapsible-panel *ngFor="let s of Template?.s; let i = index"
[title]="s.header">
<div *ngFor="let c of s.c">
<fact [eC]="c.c"
[label]="c.l">
</fact>
</div>
</collapsible-panel>
<collapsible-panel title="T">
<div>
<i-f >
</i-f>
</div>
</collapsible-panel>
</div>
<div *ngIf="!Template" class="spinner"></div>
编辑(解决方案):根据 @danday74 的以下回答,这是我实现的解决方案。
我在我发出所有 http 请求的服务中实例化了变量。我将其定义为 true 开始,并在订阅完成时在其中一个子组件中将其设置为 false。
我只需要确保将来在发生最后一个异步 http 请求的任何地方将 cService.asyncRequestsInProgress
设置为 false,如果它发生变化的话。
父 HTML:
<div class="col-sm-12"
[ngClass]="{hideMe:cService.asyncRequestsInProgress}">
......
</div>
<div *ngIf="cService.asyncRequestsInProgress" class="spinner"></div>
服务:
@Injectable()
export class CService {
asyncRequestsInProgress: boolean = true;
constructor(public http: HttpClient) { }
}
子组件(最后一个异步请求完成的地方):
export class FComponent implements OnInit {
....
doSomething() {
this.cService.getWhatever().subscribe(x => {
this.cService.asyncRequestsInProgress = false;
}
}
}
样式.css
.hideMe {
visibility: hidden;
}
最佳答案
您可以使用解析器。解析器确保在组件加载之前加载数据。
或者,如果您不想使用 *ngIf,您可以只使用 [ngClass]="{hideMe: allAsyncRequestsComplete}"
来设置加载之前不想显示的位的样式已经完成。 CSS 可能是:
.hideMe {
visibility: hidden;
}
并在加载完成后将 allAsyncRequestsComplete
设置为 true。
关于html - 如何在所有异步 http 调用完成之前显示加载指示器 - Angular,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52723909/