html - 如何在所有异步 http 调用完成之前显示加载指示器 - Angular

Question

我的问题是如何在我的所有异步 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;
}

Answer 1

您可以使用解析器。解析器确保在组件加载之前加载数据。

或者，如果您不想使用 *ngIf，您可以只使用 [ngClass]="{hideMe: allAsyncRequestsComplete}" 来设置加载之前不想显示的位的样式已经完成。 CSS 可能是:

.hideMe {
  visibility: hidden;
}

并在加载完成后将 allAsyncRequestsComplete 设置为 true。