顯示每個http請求Angular 4的加載gif

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中。

您唯一應該注意的是同時請求。 這可以通過例如為每個請求生成唯一標識符並將其存儲在某處直到請求完成來解決。

然后，您可以擁有一個注入LoadingIndicatorService的全局LoadingIndicator組件。

有關HttpClientModule的更多詳細信息： https ： //medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b

Answer 2

看看這兩個npm包：

1. ngx-progressbar ，可以根據請求自動顯示等待指示符（請參閱自動加載欄 ）， 路由器事件或您需要時。 見演示 。

2. ng-http-loader （僅適用於Angular 4.3+），它以更傳統的方式完成相同的工作，並且具有來自SpinKit的花式旋轉器。

Answer 3

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的boolean isLoading ，並且在身份驗證成功后設置為false。

這意味着您可以使用此布爾值顯示和隱藏加載動畫，如下所示：

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

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; 這將隱藏您在加載時不想看到的組件，而是顯示加載圖標