如果满足条件，稍后使用 takeUntil 取消订阅

Question

我想在数字不等于 5 的任何情况下使用 takeUntil 取消订阅 observable。如果数字是 5，想做一些事情并稍后取消订阅，但它不起作用。

这是我的 stackblitz 链接：https://stackblitz.com/edit/angular-ivy-lpkzyf ?file=src%2Fapp%2Fapp.component.ts

谢谢。

Answer 1

该声明

takeUntil我想在数字不等于 5 的任何情况下取消订阅可观察对象

不太清楚。

如果您希望在发出的值不是 5 时取消订阅可观察量，则需要使用takeWhile运算符，而不是takeUntil。

尝试以下操作

const { of, Subject } = rxjs;
const { takeUntil, takeWhile } = rxjs.operators;

const unsubscribe$ = new Subject();

of(1, 2, 3, 4, 5, 6).pipe(
  takeWhile(value => value === 5),
  takeUntil(unsubscribe$)
).subscribe({
  next: (num) => {
    console.log(num);
    console.log('something');
    unsubscribe$.next();
  },
  complete: () => console.log('Stream complete')
});

 <script src="https://unpkg.com/rxjs@6.6.7/bundles/rxjs.umd.min.js"></script> 

但这会在发出 1 时立即关闭流。

我认为您要寻找的是忽略 5 以外的值。在这种情况下，您需要使用运算filter符。

const { of, Subject } = rxjs;
const { filter, takeUntil } = rxjs.operators;

const unsubscribe$ = new Subject();

of(1, 2, 3, 4, 5, 6).pipe(
  filter(value => value === 5),
  takeUntil(unsubscribe$)
).subscribe({
  next: (num) => {
    console.log(num);
    console.log('something');
    unsubscribe$.next();
  },
  complete: () => console.log('Stream complete')
});

<script src="https://unpkg.com/rxjs@6.6.7/bundles/rxjs.umd.min.js"></script>