Angular自定义ControllerContext在慢速网络下无法正常工作的问题

问题根源 #

1. 同步获取时机错误：组件在ngOnInit中最后同步调用getControllerContext()时，慢速网络下后端请求尚未完成，因此拿到的是服务初始化时的默认数据，控制台打印的就是这个旧值（尽管后续订阅会更新this.data，但打印操作已提前执行）。
2. Subject的局限性：服务使用普通Subject，它不会缓存最新状态，若组件在服务已发送数据更新后才订阅，会错过之前的更新。
3. 构造函数过早取值：组件构造函数阶段服务的异步请求必然未完成，此时获取数据只能拿到默认值。

修复步骤 #

1. 修改ControllerContext服务（核心修复） #

将普通Subject替换为BehaviorSubject，它会自动缓存最新的上下文值，新订阅的组件能立即获取当前最新数据：

import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';
import { getDataFromServer } from './api.service';

export interface iData {
  name: string,
  age: number,
  job: string
}

export interface iControllerContextValue {
  data: iData;
  getData: () => void;
}

@Injectable({
  providedIn: 'root',
})
export class ControllerContext {
  private contextValue: iControllerContextValue;
  // 用BehaviorSubject替换Subject，传入初始默认值
  private subject: BehaviorSubject<iControllerContextValue> =
    new BehaviorSubject<iControllerContextValue>({
      data: { name: '', age: 0, job: '' },
      getData: () => void this.getData()
    });
  private contextObs: Observable<iControllerContextValue>;

  constructor() {
    this.contextObs = this.subject.asObservable();

    this.contextValue = {
      data: {
        name: '',
        age: 0,
        job: ''
      },
      getData: () => {
        void this.getData();
      },
    };
    
    void this.getData();
  }

  setControllerContext({
    data,
  }: { data: iData; }) {
    this.contextValue = {
      ...this.contextValue,
      data: data,
    };
    this.subject.next(this.contextValue);
  }

  getControllerContext() {
    return this.contextValue;
  }

  getObservedControllerContext() {
    return this.contextObs;
  }

  private async getData() {
    try {
      const data = await getDataFromServer();
      this.setControllerContext({
        data: data,
      });
    } catch (error) {
      console.error(error);
    }
  }

  public updateControllerContext() {
    void this.getData();
  }
}

2. 修改组件代码（移除同步获取逻辑） #

去掉构造函数和ngOnInit中同步获取数据的代码，完全依赖订阅更新数据，确保打印的是最新值：

import { Subscription } from 'rxjs';
import {
  ControllerContext,
  iControllerContextValue,
} from 'src/app/controller-context.service';

@Component({
  selector: 'user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],
})
export class UserComponent implements OnInit, OnDestroy {
    private controllerContextSub?: Subscription;
    data: any;
    
    constructor( private controllerContext: ControllerContext) {}
    
    ngOnInit(): void { 
        this.controllerContextSub = this.controllerContext
            .getObservedControllerContext()
            .subscribe((controllerContextData: iControllerContextValue) => {
              this.data = controllerContextData.data;
              console.log(this.data); // 将打印放在订阅回调中，确保拿到最新数据
            });
    }

    ngOnDestroy(): void {
      // 取消订阅避免内存泄漏
      this.controllerContextSub?.unsubscribe();
    }
}

修复效果 #

• 慢速网络下，组件会在后端请求完成时自动拿到正确数据并打印。
• 后续加载的组件能通过BehaviorSubject立即获取当前最新的后端数据，无需等待新请求。
• 彻底解决了因异步请求时序问题导致的默认数据错误。

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