如何用RxJS观察满足required条件的对象的toObserve属性变化？

嘿，我来帮你搞定这个问题～你当前的代码没法监听toObserve属性的动态变化，核心原因是Observable.of(next.toObserve)只会一次性发出当前的toObserve值，之后这个属性再变化时，这个Observable不会再推送新值，自然触发不了后续逻辑。

下面给你几种不同场景下的解决方案：

方案一：修改Test接口，让toObserve成为可观察对象（最推荐） #

如果能调整Test的结构，把toObserve改成BehaviorSubject<boolean>，这样属性变化时可以主动推送新值，RxJS就能轻松监听：

import { Subject, BehaviorSubject, filter, switchMap } from 'rxjs';

interface Test { 
  required: boolean; 
  toObserve: BehaviorSubject<boolean>; // 换成BehaviorSubject，保存当前值并支持推送变化
} 

class TestClass { 
  @Input() subject: Subject<Test>; 

  registerHandlers() { 
    this.subject
      .pipe(
        filter(element => element.required), // 只处理required为true的对象
        switchMap(testObj => testObj.toObserve) // 切换到toObserve的可观察流
      )
      .subscribe(val => { 
        if (val) { 
          // 这里处理toObserve为true的逻辑
        } else { 
          // 这里处理toObserve为false的逻辑
        } 
      }); 
  } 
}

使用时，当你需要修改toObserve的值，直接调用testObj.toObserve.next(true)或者next(false)，订阅就会立即收到新值并执行对应逻辑。switchMap还能自动取消前一个Test对象的订阅，避免内存泄漏。

方案二：不修改Test接口，用Angular的KeyValueDiffer监听（适用于Angular组件场景） #

如果你用的是Angular组件，且不能修改Test接口，可以借助Angular的KeyValueDiffer来检测对象属性的变化：

import { Subject, filter, tap } from 'rxjs';
import { KeyValueDiffer, KeyValueDiffers, OnInit, OnDestroy } from '@angular/core';
import { takeUntil } from 'rxjs/operators';

interface Test { 
  required: boolean; 
  toObserve: boolean; 
} 

class TestClass implements OnInit, OnDestroy { 
  @Input() subject: Subject<Test>; 
  private differMap = new Map<Test, KeyValueDiffer<string, any>>();
  private destroy$ = new Subject<void>();

  constructor(private differs: KeyValueDiffers) {}

  ngOnInit() {
    this.registerHandlers();
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
    this.differMap.clear(); // 清理资源
  }

  registerHandlers() { 
    this.subject
      .pipe(
        filter(element => element.required),
        tap(testObj => {
          // 为每个Test对象创建唯一的differ，避免重复创建
          if (!this.differMap.has(testObj)) {
            const differ = this.differs.find(testObj).create();
            this.differMap.set(testObj, differ);
            this.startObserving(testObj, differ);
          }
        }),
        takeUntil(this.destroy$)
      )
      .subscribe();
  }

  private startObserving(testObj: Test, differ: KeyValueDiffer<string, any>) {
    // 利用Angular的变更检测周期检查属性变化，比setInterval更高效
    const checkChanges = () => {
      const changes = differ.diff(testObj);
      if (changes) {
        changes.forEachChangedItem(change => {
          if (change.key === 'toObserve') {
            const val = change.currentValue as boolean;
            if (val) {
              // 处理toObserve为true的逻辑
            } else {
              // 处理toObserve为false的逻辑
            }
          }
        });
      }
    };

    // 可以把checkChanges放到组件的ngDoCheck生命周期里，这里简化示例
    const intervalId = setInterval(checkChanges, 100);
    // 记得在组件销毁时清除interval，避免内存泄漏
    this.destroy$.subscribe(() => clearInterval(intervalId));
  }
}

这个方案不需要修改原对象结构，靠Angular的变更检测机制来捕捉属性变化，适合无法调整Test接口的场景。

方案三：用Object.defineProperty拦截属性setter（通用场景） #

如果不是Angular环境，也不能修改Test接口，可以通过重写属性的setter来监听变化：

import { Subject, filter, switchMap, fromEventPattern } from 'rxjs';

interface Test { 
  required: boolean; 
  toObserve: boolean; 
} 

class TestClass { 
  @Input() subject: Subject<Test>; 
  private destroy$ = new Subject<void>();

  registerHandlers() { 
    this.subject
      .pipe(
        filter(element => element.required),
        switchMap(testObj => {
          let currentValue = testObj.toObserve;
          // 用fromEventPattern包装属性变化事件
          return fromEventPattern<boolean>(handler => {
            Object.defineProperty(testObj, 'toObserve', {
              get() { return currentValue; },
              set(val: boolean) {
                currentValue = val;
                handler(val); // 属性变化时通知Observable
              },
              configurable: true // 允许后续恢复原属性定义
            });
          });
        }),
        takeUntil(this.destroy$)
      )
      .subscribe(val => { 
        if (val) { 
          // 处理toObserve为true的逻辑
        } else { 
          // 处理toObserve为false的逻辑
        } 
      }); 
  }

  // 组件销毁时调用，清理资源
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

这种方式通过拦截toObserve的setter，只要外部修改testObj.toObserve = xxx，就会触发Observable推送新值，适用于任何JavaScript/TypeScript环境。

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