在Angular中,你可以使用拦截器来管理页面上的多个加载器/旋转器。下面是一个使用拦截器来管理加载器的示例代码:
首先,创建一个LoaderService
来管理加载器的显示和隐藏:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class LoaderService {
public isLoading: BehaviorSubject = new BehaviorSubject(false);
showLoader(): void {
this.isLoading.next(true);
}
hideLoader(): void {
this.isLoading.next(false);
}
}
然后,创建一个LoaderInterceptor
拦截器来拦截HTTP请求和响应,并根据需要显示和隐藏加载器:
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpResponse, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { LoaderService } from './loader.service';
@Injectable({
providedIn: 'root'
})
export class LoaderInterceptor implements HttpInterceptor {
constructor(private loaderService: LoaderService) {}
intercept(request: HttpRequest, next: HttpHandler): Observable> {
this.loaderService.showLoader();
return next.handle(request).pipe(
tap((event: HttpEvent) => {
if (event instanceof HttpResponse) {
this.loaderService.hideLoader();
}
}, (error: any) => {
this.loaderService.hideLoader();
})
);
}
}
接下来,在你的AppModule
中将LoaderInterceptor
添加到拦截器列表中,并在providers数组中注入LoaderService
:
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LoaderInterceptor } from './loader.interceptor';
import { LoaderService } from './loader.service';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [
LoaderService,
{ provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule { }
最后,在你的组件中使用LoaderService
来订阅加载器的状态,并在页面上显示加载器:
import { Component } from '@angular/core';
import { LoaderService } from './loader.service';
@Component({
selector: 'app-root',
template: `
`,
styles: [`
.loader {
/* 加载器的样式 */
}
`]
})
export class AppComponent {
constructor(public loaderService: LoaderService) { }
}
通过这种方式,你可以在页面中使用多个加载器,并使用拦截器来自动显示和隐藏它们。当有HTTP请求时,加载器将显示,直到响应返回后才隐藏。