即使评估为真，带复选框的 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 示例