Angular中Observable在回调函数中失效但Subject正常的问题

你的Observable方式无效的核心原因是：每次调用aMethod时都会创建一个全新的Observable实例，但组件订阅的是最初赋值的那个旧实例，后续新创建的Observable从未被订阅，自然无法接收数据。以下是不使用Subject的可行方案：

修正后的服务代码 #

@Injectable({
  providedIn: 'root'
})
export class AService {
  counter: number = 0;
  anObject = new anObject();
  private observer!: Observer<anObject>;

  // 只初始化一次的持久化Observable
  dataObservable = new Observable<anObject>((observer) => {
    this.observer = observer;
    // 订阅时立即发送当前数据
    observer.next({ ...this.anObject });
    // 订阅销毁时清空观察者引用
    return () => {
      this.observer = null!;
    };
  });

  aMethod = () => {
    // 建议创建新对象而非修改原对象，避免引用类型导致的变更检测问题
    this.anObject = {
      ...this.anObject,
      a: this.anObject.a + 4,
      b: this.anObject.b + 3
    };

    // 通过保存的观察者发送最新数据
    if (this.observer) {
      this.observer.next(this.anObject);
    }
   
    this.counter++;
   
    // 修复原代码的错误：需要调用函数而非仅引用
    if (this.counter < 100 ) {
      this.aMethod();
    }
  }
}

关键说明 #

1. 持久化Observable：dataObservable仅在服务初始化时创建一次，组件订阅后会保存对应的观察者实例，后续所有数据更新都通过这个观察者发送。
2. 避免引用类型问题：通过扩展运算符{ ...this.anObject }创建新对象，确保组件收到的是全新的引用，能可靠触发Angular的变更检测。
3. 修复调用错误：原代码中this.aMethod只是函数引用，未执行调用，改为this.aMethod()才能完成100次循环执行。

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