Angular 13添加额外HTTP请求头及解决初始化报错问题

错误原因 #

出现Property 'getActiveSubscibers' is used before its initialization的核心原因是类字段的初始化顺序：类的实例字段（比如getUserProfiles）会在构造函数执行前完成初始化。如果把getActiveSubscibers移到构造函数中赋值，此时getUserProfiles已经在尝试引用它，自然会触发未初始化的错误。

正确实现方式 #

我们需要调整属性的初始化顺序，确保headerModels、getActiveSubscibers在被引用前完成初始化，同时正确添加accesstype请求头。以下是两种可行方案：

方案1：调整字段初始化顺序，提前初始化headerModels

直接在类字段中先初始化headerModels并添加请求头，再创建getActiveSubscibers，无需移到构造函数：

// 先初始化headerModels并添加accesstype请求头
headerModels: ReqestHeaders = {
  method: 'GET',
  headers: new Headers({ 'accesstype': 'your-access-type-value' }),
  body: null,
  url: null
};

// 基于已初始化的headerModels创建请求配置
public getActiveSubscibers = HttpReadRequest.create(`api-getActiveSubscription/activeUsers`)
  .withOptions(this.headerModels);

// 此时getUserProfiles可以正常引用getActiveSubscibers
getUserProfiles = this.http.get(this.getActiveSubscibers).pipe(
  map((resp: any) => resp.response.json()),
  shareReplay(1)
);

constructor() {}

方案2：将getUserProfiles改为在构造函数中初始化

如果必须把getActiveSubscibers放在构造函数中（比如需要依赖注入的服务获取accesstype的值），则需要延迟getUserProfiles的初始化时机：

headerModels: ReqestHeaders;
public getActiveSubscibers: ReturnType<typeof HttpReadRequest.create>;
// 先声明类型，不在字段中初始化
getUserProfiles: Observable<any>;

constructor(private http: HttpClient) {
  // 1. 初始化headerModels并添加accesstype
  this.headerModels = {
    method: 'GET',
    headers: new Headers({ 'accesstype': 'your-access-type-value' }),
    body: null,
    url: null
  };

  // 2. 创建getActiveSubscibers
  this.getActiveSubscibers = HttpReadRequest.create(`api-getActiveSubscription/activeUsers`)
    .withOptions(this.headerModels);

  // 3. 最后初始化getUserProfiles
  this.getUserProfiles = this.http.get(this.getActiveSubscibers).pipe(
    map((resp: any) => resp.response.json()),
    shareReplay(1)
  );
}

关键注意点 #

• 确保headerModels在被withOptions使用前完成初始化，且已正确添加accesstype请求头。
• 若accesstype的值需要从依赖注入的服务获取（比如权限服务），必须放在构造函数中执行，同时所有依赖该配置的Observable也要移到构造函数中初始化。

内容的提问来源于stack exchange，提问作者Mr. Learner