Angular 5新手求助：如何为所有HTTP请求实现全局加载动画？

Hey there! As someone new to Angular 5, adding a global loading spinner for all HTTP requests is a fantastic way to boost your app's user experience—it lets users know something's happening behind the scenes. Let's break down a clean, reusable implementation step by step:

1. 创建加载状态管理服务 #

First, we need a service to handle the loading state across our app. We'll use a BehaviorSubject from RxJS so components can subscribe to state changes in real-time.

Create loading.service.ts:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class LoadingService {
  private loadingCount = 0;
  private loadingSubject = new BehaviorSubject<boolean>(false);
  // 对外暴露可观察对象，避免外部直接修改状态
  public loading$ = this.loadingSubject.asObservable();

  show(): void {
    this.loadingCount++;
    this.loadingSubject.next(true);
  }

  hide(): void {
    this.loadingCount--;
    // 只有当所有请求都完成时才隐藏加载动画
    if (this.loadingCount <= 0) {
      this.loadingCount = 0;
      this.loadingSubject.next(false);
    }
  }
}

2. 创建HTTP拦截器拦截请求 #

Angular 5's HttpClient supports interceptors, which let us hook into every HTTP request/response. We'll use this to trigger the loading spinner when a request starts, and hide it when it finishes (success or failure).

Create loading.interceptor.ts:

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { LoadingService } from './loading.service';
import 'rxjs/add/operator/finally';

@Injectable()
export class LoadingInterceptor implements HttpInterceptor {
  constructor(private loadingService: LoadingService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 请求开始时显示加载动画
    this.loadingService.show();

    // 使用finally确保无论请求成功还是失败，都会隐藏加载动画
    return next.handle(request).finally(() => {
      this.loadingService.hide();
    });
  }
}

3. 在AppModule中注册服务和拦截器 #

We need to tell Angular about our service and interceptor. Make sure to import HttpClientModule (required for using HttpClient and interceptors).

Update app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { AppComponent } from './app.component';
import { LoadingService } from './loading.service';
import { LoadingInterceptor } from './loading.interceptor';
import { LoadingComponent } from './loading/loading.component'; // 后面会创建这个组件

@NgModule({
  declarations: [
    AppComponent,
    LoadingComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    LoadingService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: LoadingInterceptor,
      multi: true // 允许注册多个拦截器
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 创建加载动画组件 #

Now let's build a simple component to display the loading spinner. This component will subscribe to our LoadingService to show/hide itself based on the loading state.

Create loading/loading.component.ts:

import { Component, OnInit } from '@angular/core';
import { LoadingService } from '../loading.service';

@Component({
  selector: 'app-loading',
  templateUrl: './loading.component.html',
  styleUrls: ['./loading.component.css']
})
export class LoadingComponent implements OnInit {
  isLoading = false;

  constructor(private loadingService: LoadingService) { }

  ngOnInit(): void {
    // 订阅加载状态变化
    this.loadingService.loading$.subscribe(loadingState => {
      this.isLoading = loadingState;
    });
  }
}

Create loading/loading.component.html:

<div *ngIf="isLoading" class="loading-overlay">
  <div class="spinner-container">
    <div class="spinner">⌛ Loading...</div>
  </div>
</div>

Create loading/loading.component.css:

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 确保在所有内容之上 */
}

.spinner-container {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.spinner {
  font-size: 1.2rem;
  color: #333;
}

5. 在根组件中添加加载组件 #

Finally, add the <app-loading> selector to your root component's template so it's present across the entire app.

Update app.component.html:

<!-- 其他应用内容 -->
<router-outlet></router-outlet>

<!-- 加载动画组件 -->
<app-loading></app-loading>

额外优化：跳过特定请求的加载动画 #

If you have some requests where you don't want to show the spinner (like small API calls), you can add a custom header to those requests, then modify the interceptor to skip them.

修改拦截器： #

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // 检查请求头是否包含skipLoading
  if (request.headers.has('skipLoading')) {
    // 移除自定义头，避免发送到服务器
    const clonedRequest = request.clone({
      headers: request.headers.delete('skipLoading')
    });
    return next.handle(clonedRequest);
  }

  this.loadingService.show();
  return next.handle(request).finally(() => {
    this.loadingService.hide();
  });
}

在请求时添加头： #

this.http.get('/api/small-data', {
  headers: new HttpHeaders().set('skipLoading', 'true')
});

That's it! Now every HTTP request made with HttpClient will trigger the loading spinner automatically, and it'll handle concurrent requests properly.

内容的提问来源于stack exchange，提问作者Harish