rxjs - 在 BehaviorSubject 中更新 self 时如何避免无限循环？

Question

声明如下:

  public panel$: BehaviorSubject<any> = new BehaviorSubject<any>(false);

像这样使用

  togglepanel() {
    this.panel$.subscribe(
      (x) => {
        if (x) {
          this.panel$.next(false);
        } else {
          this.panel$.next(true);
        }
      });
  }

它创造了一个试图更新 self 的无限循环。

Answer 1

您可以通过仅从 panel$ Observable 获取一个(最新)值来更新它:

this.panel$.take(1).subscribe(...)

但是最好对状态进行一些不同的建模，如下所示:

// const onToggle$ = new Rx.Subject();
var toggle$ = Rx.Observable.fromEvent(document, 'click');

const initialValue = true;
const state$ = toggle$
  .scan(state => !state, initialValue)
  .startWith(initialValue);
      
const htmlSubscription = state$.subscribe(state => {
  document.getElementById('toggle').innerText = 'toggle: ' + state;
});

<script src="https://unpkg.com/rxjs/bundles/Rx.min.js"></script>
<button id="toggle">loading...</button>

编辑:

这段代码的角度版本是:

  public toggle$ = new Subject();
  public state$ = this.toggle$.scan(state => !state, true)
                        .startWith(true)
                        .subscribe((x) => console.log('x:' + x));


  togglepanel() {
    this.toggle$.next(null);
  }