在Angular 8中,拦截器在页面加载时未被调用的问题可能是由于拦截器未正确地注入到应用程序中引起的。下面是解决这个问题的一些示例代码:
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class BasicInterceptor implements HttpInterceptor {
intercept(request: HttpRequest, next: HttpHandler): Observable> {
// 在请求之前做一些处理
console.log('Intercepted request:', request);
// 继续处理请求
return next.handle(request);
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { BasicInterceptor } from './basic.interceptor';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [
// 将拦截器添加到提供者列表中
{ provide: HTTP_INTERCEPTORS, useClass: BasicInterceptor, multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule { }
确保HTTP_INTERCEPTORS
被正确导入。
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
constructor(private http: HttpClient) {}
makeRequest() {
this.http.get('https://jsonplaceholder.typicode.com/posts').subscribe(response => {
console.log('Response:', response);
});
}
}
确保在组件的构造函数中正确注入HttpClient。
这样,在页面加载时,拦截器应该被调用并输出相应的请求信息。