像这样的事情：
@Injectable()
export class I1 implements HttpInterceptor {
constructor(public service: SomeService) {
console.log(service);
}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
setTimeout(() => {
this.service.loading = true;
});
return next.handle(req).do(
(event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
setTimeout(() => {
this.service.loading = false;
});
}
},
(err: any) => {
}
);
}
}
SomeService.ts:
@Injectable()
export class SomeService {
_loading = false;
constructor() {
}
set loading(isLoad: boolean) {
this._loading = isLoad;
}
get loading() {
return this._loading;
}
}
而在你的Root组件注入此服务：
@Component({
selector: 'my-app',
template: `
IsLoading: {{service.loading}}
<div><h3>Response</h3>{{response|async|json}}</div>
<button (click)="request()">Make request</button>`
,
})
export class AppComponent {
response: Observable<any>;
constructor(private http: HttpClient, public service: SomeService) {}
request() {
const url = 'https://jsonplaceholder.typicode.com/posts/1';
this.response = this.http.get(url, {observe: 'body'});
}
}
代码示例 https://stackblitz.com/edit/angular-interceptors-8zh9th
- 与使用行为主体
旋转服务：
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { share } from 'rxjs/operators';
@Injectable()
export class SpinnerService {
private visible$ = new BehaviorSubject<boolean>(false);
show() {
this.visible$.next(true);
}
hide() {
this.visible$.next(false);
}
isVisible(): Observable<boolean> {
return this.visible$.asObservable().pipe(share());
}
}
StackBlitz 示例 https://angular-interceptors-loading.stackblitz.io
