Angular 5中如何订阅HttpInterceptor捕获的错误并在其他服务中使用

我明白你遇到的问题——在升级到HttpClient的拦截器体系后，原来依赖注入拦截器服务来订阅错误的方式行不通了，这是因为Angular对HttpClient拦截器的实例管理方式和旧的Http模块完全不同。

问题根源 #

旧的HttpInterceptorService继承自Http，可以作为普通服务被注入，但新的HttpInterceptor是通过HTTP_INTERCEPTORS令牌注册的，Angular不会把它当作普通的可注入服务（除非你额外手动注册，但这样会创建多个实例，导致你的onError事件发射器不是同一个，订阅自然失效）。

标准解决方案：用独立的错误通知服务中转事件 #

正确的做法是把错误事件的管理从拦截器中剥离出来，创建一个独立的单例服务来负责错误事件的分发，拦截器只需要调用这个服务，而其他需要监听错误的服务（比如你的通知服务）订阅这个独立服务的事件即可。

步骤1：创建独立的错误通知服务

这个服务专门负责错误事件的发送和订阅，用RxJS的Subject代替EventEmitter（服务里更推荐用RxJS原生的Subject，EventEmitter主要用于组件的@Output）：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class ErrorNotificationService {
  // 用Subject存储错误事件，对外暴露可观察对象
  private errorSubject = new Subject<HttpErrorResponse>();
  public error$ = this.errorSubject.asObservable();

  // 发送错误事件的方法
  emitHttpError(error: HttpErrorResponse): void {
    this.errorSubject.next(error);
  }
}

步骤2：修改拦截器，注入错误通知服务

在拦截器里不再维护自己的EventEmitter，而是注入上面的错误通知服务，捕获错误时调用它的方法：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { ErrorNotificationService } from './error-notification.service';

@Injectable()
export class HttpInterceptorService implements HttpInterceptor {
  constructor(private errorNotificationService: ErrorNotificationService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        // 把错误传递给错误通知服务
        this.errorNotificationService.emitHttpError(error);
        // 继续抛出错误，让后续的错误处理逻辑能捕获到
        return throwError(() => error);
      })
    );
  }
}

步骤3：在通知服务中订阅错误事件

修改你的notifications.service.ts，注入ErrorNotificationService并订阅错误流：

import { Injectable } from '@angular/core';
import { ErrorNotificationService } from './error-notification.service';
import { HttpErrorResponse } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class NotificationsService {
  constructor(private errorNotificationService: ErrorNotificationService) {
    // 订阅错误事件，更新UI
    this.errorNotificationService.error$.subscribe((error: HttpErrorResponse) => {
      // 这里写你的UI更新逻辑，比如显示错误提示弹窗、Toast等
      console.log('HTTP错误触发通知:', error.message);
      // 替换成你原来的UI更新代码
    });
  }
}

步骤4：确保拦截器的正确注册

在app.module.ts里按官方要求注册拦截器，不需要单独注册HttpInterceptorService为普通provider：

import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpInterceptorService } from './http-interceptor.service';

@NgModule({
  imports: [HttpClientModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorService,
      multi: true // 必须设置为true，支持多个拦截器共存
    }
    // ErrorNotificationService和NotificationsService用了providedIn: 'root'，无需在这里注册
  ]
})
export class AppModule { }

为什么这个方案可行？ #

• ErrorNotificationService是单例服务（通过providedIn: 'root'实现），拦截器和通知服务注入的是同一个实例，确保事件能正确传递。
• 分离了关注点：拦截器只负责捕获HTTP错误并转发，错误的分发和UI处理由专门的服务负责，符合Angular的最佳实践。
• 避免了直接注入拦截器带来的依赖问题，拦截器的实例由Angular的HTTP模块统一管理，不会出现"No provider"的错误。

内容的提问来源于stack exchange，提问作者Tom Oakley