在Angular Interceptor中调用Service后组件收不到通知如何解决？

第一步：确认拦截器是否正常触发 #

Angular内置拦截器仅对HttpClient发起的请求生效，若拦截器本身没有触发，后续通知逻辑自然不会执行。

• 排查操作：在intercept方法第一行添加console.log('拦截器已触发', request)，触发一次HTTP请求，观察控制台是否有对应输出。
• 异常处理：
  • 若没有输出：确认你发送的请求是通过HttpClient发起，原生fetch、XMLHttpRequest发起的请求不会被拦截。
  • 若确定是HttpClient请求仍无输出：检查LogInterceptor的导入路径是否正确，你当前app.module.ts中HTTP_INTERCEPTORS的配置本身符合规范。

第二步：确认Service是全局单例实例 #

你的MastermindService已经配置了providedIn: 'root'，默认就是全局单例，但如果在任意模块、组件的providers数组中重复声明了该Service，会生成多个独立实例，导致拦截器注入的Service和日志组件注入的不是同一个，消息无法传递。

• 排查操作：全局搜索代码中MastermindService的出现位置，确认除了providedIn: 'root'外，没有在任何@NgModule、@Component的providers数组中重复声明。
• 异常处理：删除所有重复声明的MastermindService即可。

第三步：确认日志组件已正常初始化 #

如果日志组件没有被渲染到页面中，ngOnInit不会执行，也就不会订阅Service的消息。

• 排查操作：在日志组件的ngOnInit中添加console.log('日志组件初始化完成')，刷新页面观察控制台是否有对应输出。
• 异常处理：在页面模板（通常是app.component.html）中添加<app-custom-log></app-custom-log>标签，确保组件被正常渲染。

第四步：修复消息丢失问题 #

若前面三步都正常，问题出在普通Subject的特性上：Subject仅会将消息推送给订阅之后发送的事件，如果请求在日志组件完成订阅前就已经发起，消息会直接丢失。

• 解决方法：将MastermindService中的Subject替换为ReplaySubject，它会缓存历史发送的消息，订阅后可以收到订阅前发送的内容：

// 修改service.ts代码
import { ReplaySubject } from 'rxjs'; // 新增导入

@Injectable({
  providedIn: 'root'
})
export class MastermindService {
  // 替换Subject为ReplaySubject，参数20表示最多缓存最近20条消息，可根据需求调整
  private subject = new ReplaySubject<string>(20);

  public notify(message: string): void {
    this.subject.next(message);
  }
  public listen(): Observable<string> {
    return this.subject.asObservable();
  }
}

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