Angular 显示微调器请求 http

如何解决Angular 显示微调器请求 http

我有一个调用 http 请求的 Angular 应用程序。这些请求的结果被传递到一个行为主体中。我需要当我运行一个 http 请求时，我想发布一个微调器并隐藏我页面的其余部分我找不到可以做到这一点的解决方案另请注意，我的页面包含子组件

解决方法

有多种解决方案，Pace js 一个简单的解决方案，但您可以轻松地自己解决 like this repro on Stackblitz。代码如下：

<app-loader *ngIf="loading"></app-loader>
<div *ngIf="!loading">
    App Component,below is the child.
    <button (click)="doSomething()">Do async call</button>

    <app-child></app-child>
</div>

app.ts

export class AppComponent  {
  loading = false;

  doSomething() {
    this.loading = true;

    // "of(null)" is just here to simulate an http call. setTimeout simulate the time that this call took to end
    of(null).subscribe(result => {
      setTimeout(() => this.loading = false,2000);
    });
  }
}

加载器来自https://loading.io/css/

如果您希望能够从任何组件显示此加载程序，请使用一些 css 以全屏方式展开您的加载程序，您只需使用 loading true/false 和 {{1 }} 组件在 html 中。

您希望通过加载来建立子组件和父组件的关系。

应用组件和子组件。
希望您从孩子或应用孩子那里采取行动。

https://ultimatecourses.com/blog/component-events-event-emitter-output-angular-2

app-component.html

<button class="btn btn-block btn-warning mb-3" (click)="load()">
    with Timeout 2 seconds
</button>
<div class="my-loader" *ngIf="isLoading"></div>

app-component.ts

export class AppComponent {
    isLoading = false;
    makeHttpRequest() : void {
        this.isLoading = true;
            const subject = new BehaviorSubject(null);
            subject.subscribe(
                setTimeout(() => this.isLoading = false,4000);
            );
    }
}