在Angular 7中,可以通过使用HttpInterceptor
来为多个HTTP调用添加单个加载器。下面是一个示例解决方法:
首先,创建一个LoaderInterceptor
类实现HttpInterceptor
接口,该类将拦截所有的HTTP请求和响应,并在每个请求开始和结束时显示/隐藏加载器:
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';
import { LoaderService } from './loader.service';
@Injectable()
export class LoaderInterceptor implements HttpInterceptor {
constructor(private loaderService: LoaderService) { }
intercept(request: HttpRequest, next: HttpHandler): Observable> {
this.loaderService.showLoader(); // 显示加载器
return next.handle(request).pipe(
finalize(() => {
this.loaderService.hideLoader(); // 隐藏加载器
})
);
}
}
然后,创建一个LoaderService
类来管理加载器的显示和隐藏:
import { Injectable } from '@angular/core';
@Injectable()
export class LoaderService {
private isLoading = false;
constructor() { }
showLoader() {
this.isLoading = true;
// 显示加载器的逻辑,例如显示一个加载动画或禁用用户界面
}
hideLoader() {
this.isLoading = false;
// 隐藏加载器的逻辑,例如隐藏加载动画或启用用户界面
}
isLoadingStatus() {
return this.isLoading;
}
}
最后,在应用的根模块中注册LoaderInterceptor
:
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 { LoaderInterceptor } from './loader.interceptor';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,每当发出HTTP请求时,加载器都会显示,并在请求完成后隐藏。可以使用LoaderService
来控制加载器的显示和隐藏逻辑,并在组件中订阅isLoadingStatus
方法以获取加载器的当前状态。