如何向Interceptor类传递值？拦截器需添加来自AppComponent的id字段

方法一：用共享服务传递（推荐，低耦合） #

Angular里跨组件/服务传递动态值，最规范的方式是用共享服务+RxJS的BehaviorSubject，因为EventEmitter主要用于父子组件的模板绑定通信，跨拦截器这类服务层场景适配性较差。

1. 创建共享数据服务

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class RequestMetadataService {
  // BehaviorSubject会保存最新值，订阅时能直接拿到当前id
  private _currentId = new BehaviorSubject<string | null>(null);
  currentId$ = this._currentId.asObservable();

  // 更新id的方法，供AppComponent调用
  updateRequestId(id: string) {
    this._currentId.next(id);
  }
}

2. 在AppComponent中同步EventEmitter的值到服务

import { Component } from '@angular/core';
import { RequestMetadataService } from './request-metadata.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private metadataService: RequestMetadataService) {}

  // 假设你的EventEmitter是这个
  yourEventEmitter.subscribe((id) => {
    // 把EventEmitter的值同步到共享服务
    this.metadataService.updateRequestId(id);
  });
}

3. 在拦截器中订阅服务值并修改请求

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import { RequestMetadataService } from './request-metadata.service';
import { switchMap } from 'rxjs/operators';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private metadataService: RequestMetadataService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // 先拿到最新的id，再处理请求
    return this.metadataService.currentId$.pipe(
      switchMap(id => {
        // 先克隆请求并添加Bearer Token
        let newRequest = req.clone({
          setHeaders: {
            Authorization: `Bearer ${yourTokenVariable}`
          }
        });

        // 如果id存在，根据请求类型添加字段
        if (id) {
          // POST/PUT等带请求体的接口，合并id到body
          if (newRequest.body) {
            newRequest = newRequest.clone({
              body: { ...newRequest.body, id }
            });
          } else {
            // GET请求，添加为查询参数
            newRequest = newRequest.clone({
              params: newRequest.params.set('id', id)
            });
          }
        }

        return next.handle(newRequest);
      })
    );
  }
}

方法二：直接注入AppComponent（不推荐，高耦合） #

如果只是临时快速实现，可以直接把AppComponent注入到拦截器，但这种方式会让拦截器和组件强耦合，不利于后续维护：

1. 在AppComponent中保存EventEmitter的最新值

export class AppComponent {
  currentRequestId: string | null = null;

  yourEventEmitter.subscribe((id) => {
    this.currentRequestId = id;
  });
}

2. 在拦截器中注入AppComponent并获取值

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import { AppComponent } from './app.component';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private appComp: AppComponent) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const id = this.appComp.currentRequestId;
    let newRequest = req.clone({
      setHeaders: {
        Authorization: `Bearer ${yourTokenVariable}`
      }
    });

    if (id) {
      // 同方法一，根据请求类型添加id字段
      if (newRequest.body) {
        newRequest = newRequest.clone({ body: { ...newRequest.body, id } });
      } else {
        newRequest = newRequest.clone({ params: newRequest.params.set('id', id) });
      }
    }

    return next.handle(newRequest);
  }
}

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