HttpInterceptor
我正在Angular 16的帮助下制作一个应用程序级“加载旋转器” 。
在app\services\interceptor.service.ts
我有:
import { Injectable } from '@angular/core';
import { HttpInterceptor,HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';
import { SpinnerService } from './spinner.service';
@Injectable({
providedIn: 'root'
})
export class HttpInterceptorService implements HttpInterceptor {
constructor(private spinnerService: SpinnerService) { }
public intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
this.spinnerService.show();
return next.handle(req).pipe(
finalize(() => {
this.spinnerService.hide();
})
);
}
}
在app\services\spinner.service.ts
:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class SpinnerService {
private spinnerCounter = new BehaviorSubject<number>(0);
spinnerCounter$ = this.spinnerCounter.asObservable();
public show() {
this.spinnerCounter.next(this.spinnerCounter.value + 1);
}
public hide() {
this.spinnerCounter.next(this.spinnerCounter.value - 1);
}
}
我已导入spinnerService
并将app\app.component.ts
微调器添加到app\app.component.html
.
<app-loading-spinner *ngIf="spinnerService.spinnerCounter$ | async"></app-loading-spinner>
该app-loading-spinner
组件永远不会在 HTTP 请求之间显示。我做错了什么以及如何解决这个问题?