在Angular中,可以使用拦截器来处理HTTP请求和响应。有时需要在多个拦截器之间切换或添加可选拦截器。但是,在使用可选拦截器时,有时会遇到注入null的问题。
解决这个问题的方法是添加一个provideIn选项,并将其设置为“root”。这将确保提供程序在根注入器中注册,并且不会在任何地方注入null。
以下是一个示例拦截器:
@Injectable({ providedIn: 'root' })
export class MyInterceptor implements HttpInterceptor {
constructor() {}
intercept(req: HttpRequest, next: HttpHandler): Observable> {
// Do something with the request
const modifiedReq = req.clone({ headers: req.headers.append('Authorization', 'Bearer my-token') });
// Pass the request to the next interceptor or HttpHandler
return next.handle(modifiedReq);
}
}
要在应用程序中添加多个拦截器,只需将它们作为provideIn选项为“root”的单独服务进行注册,然后在HttpClient模块中使用provide选项注入它们。如下所示:
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: AnotherInterceptor, multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule {}
通过将多个拦截器注册为单独的服务,并使用provide选项将它们注入到HttpClient模块中,您可以在应用程序中使用任意数量的拦截器,而无需担心注入为null的问题。