Question

我对Angular很新，所以我需要的是每次http请求完成时都显示spinner。

我有很多组件：

<component-one></component-one>
<component-two></component-two>
<component-three></component-three>
<component-n></component-n>

每个人都有一个获取或保存一些数据的http请求，因此当我发出http请求时，我想显示我的<loading></loading>组件，所以我认为将我的加载组件注入到每个其他组件中并不是一个好习惯。一个http请求。我可以添加一个过滤器或角度的东西，允许我在每个有http请求的组件中自动加载<loading>组件吗？

同样，当http请求完成后，我想显示“完成”或某些消息。

如果有人能为我提供解决方案，我将非常感激，ty。

Answer 1

UPD：plunker。看看app.ts。很抱歉将所有内容都放在一个文件中。

在Angular 4.3中，有一个新的HttpClientModule支持拦截器。主要想法是这样的：

@Injectable()
export class LoadingIndicatorService {

    private _loading: boolean = false;

    get loading(): boolean {
        return this._loading;
    }

    onRequestStarted(): void {
        this._loading = true;
    }

    onRequestFinished(): void {
        this._loading = false;
    }
}

然后你只需将Christopher的答案中的逻辑应用到你的HttpInterceptor中。

您唯一应该注意的是同时请求。这可以通过例如为每个请求生成唯一标识符并将其存储在某个地方直到请求完成来解决。

然后，您可以拥有一个注入LoadingIndicator的全局LoadingIndicatorService组件。

有关HttpClientModule的更多详细信息：https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b

Answer 2

http请求返回可以订阅的Observable。

例如，让我们对用户进行身份验证。

在我的服务中：

login(email: string, password: string): Observable<User> {
    let url = this.authUrl + '/login';

    return this.http
        .post(url, JSON.stringify({ email, password }))
        .map(res => res.json());
}

我在我的组件中调用并订阅了这个方法：

 this.isLoading = true;
 this.authService.login(email, password)
        .subscribe(data => {
            this.isLoading = false;
            // Do whatever you want once the user is logged in
            // Where 'data' is the User returned by our http request
         }, error => {
            // Handle errors here
         }

请注意在尝试登录我们的用户之前设置为true的布尔值isLoading，并且在身份验证成功后设置为false。

这意味着您可以使用此布尔值显示和隐藏加载动画，例如：

<loading-component *ngIf="isLoading"></loading-component>

Answer 3

查看这两个npm包：

ngx-progressbar，可以根据请求自动显示等待指标（请参阅automagic loading bar），router events或您需要时。请参阅demo。
ng-http-loader（仅适用于Angular 4.3+），它以更传统的方式执行相同的工作，并且来自SpinKit的花哨的微调器。

Answer 4

使用angular 2+，创建可重复使用的util组件

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-progress-mask',
  templateUrl: './progress-mask.component.html',
  styleUrls: ['./progress-mask.component.css']
})
export class ProgressMaskComponent implements OnInit {
  @Input() showProgress:boolean = false;
  constructor() { }

  ngOnInit() {
  }

}

html部分：

<div class="loadWrapper" *ngIf="showProgress">  
  <div class="loader"></div>  
</div>

CSS部分：

.loadWrapper {  
    background: rgba(0,0,0,0.3);  
    width: 100%;  
    height: 100%;  
    position: fixed;  
    top:0px;  
    left:0px;  
    z-index: 99999;  
}  
.loader {
    border: 5px solid #f3f3f3; /* Light grey */
    border-top: 5px solid #3d3e3f; /* gray */
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

现在将其插入到您的组件中

<app-progress-mask [showProgress]="showMask"></app-progress-mask>

将组件的showMask绑定到可重用的util组件

Answer 5

在component.ts

中

public loading: boolean = false;

在component.html

中

<div *ngIf="!loading">
  <component-one></component-one>
  <component-two></component-two>
  <component-three></component-three>
  <component-n></component-n>
</div>

<loading *ngIf="loading"></loading>

每当您需要查看加载图标时，只需设置this.loading = true;并隐藏它this.loading = false;这将隐藏您在加载时不想看到的组件并显示加载图标

显示每个http请求Angular 4的加载gif

5 个答案: