即使評估為真，帶復選框的 TakeUntil 也會阻止流

Question

一旦復選框被關閉，我正在嘗試使用takeUntil來停止流。 我在 Angular 中，所以現在我只是在類屬性上連接一個刺，而不用擔心連接可觀察的結果。

this.checked$是一個BehaviorSubject ，當我的復選框被取消/激活時，它開始為false並獲得next ed。 那部分肯定至少在某種程度上起作用，因為下面將開始顯示點。 但是，添加（在下面注釋掉） takeUntil(this.checked$)導致根本不顯示點。

const source$ = interval(250).pipe(mapTo("."));
this.checked$
.pipe(
  filter(c => {
    return c === true;
  }),
  switchMap(() => {
    console.log("switchMap");
    // return source$.pipe(takeUntil(this.checked$));
    return source$;
  })
)
.subscribe(data => {
  console.log("in subscribe", data, this.dots);
  this.dots += data;
});

我在這里使用BehaviorSubject和takeUntil什么不正確？

這是 StackBlitz 上的一個完整示例。

Answer 1

請注意， takeUntil僅在發出第一個checked$之前發出值， 這里有很好的例子。 因為checked$是一個BehaviorSubject它會在您訂閱它時立即發出當前值，因此takeUntil停止。

一個解決方案可能是在source$和 switchMap 中的一個空的 observable 之間切換，比如：

const source$ = interval(250).pipe(mapTo("."));
this.checked$
  .pipe(
    switchMap(c => {
      console.log("switchMap");
      return c ? source$ : EMPTY;
    })
  )
  .subscribe(data => {
    console.log("in subscribe", data, this.dots);
    this.dots += data;
  });

StackBlitz 示例

---

您也可以通過跳過checked$主題的第一個值來修復您的原始解決方案，但我建議您使用以前的解決方案，因為它更簡單。

const source$ = interval(250).pipe(mapTo("."));
this.checked$
  .pipe(
    filter(c => {
      return c === true;
    }),
    switchMap(() => {
      console.log("switchMap");
   // return source$.pipe(takeUntil(this.checked$));
      return source$.pipe(takeUntil(this.checked$.pipe(skip(1))));
    })
  )
  .subscribe(data => {
    console.log("in subscribe", data, this.dots);
    this.dots += data;
  });

StackBlitz 示例

---

另一種解決方案是使用Subject而不是BehaviorSubject 。 不同之處在於， Subject不持有當前值，並且在您訂閱它時不會發出任何內容。 它僅在調用next()時發出。 如果在原始解決方案中將BehaviorSubject替換為Subject ，它將按預期工作。

StackBlitz 示例