当主题发出特定值时，使用RXJS取消订阅

问题描述

我认为我应该针对特定用例使用RXJS。用例是我有一个要一直居住的订阅，直到其他地方的Subject发出某个值为止。

例如：

// The sub to unsub when a certain <value> is emitted from a Subject elsewhere.
this.someObservable.subscribe(() => ...)


// Somewhere in the code far,far away,this should kill the subscription(s) that cares about <value>
this.kill.next(<value>)

我要解决的方法是缓存订阅，然后在调用具有相关this.kill.next(<value>)的{​​{1}}时取消订阅。不过，这是当务之急，感觉可以通过<value>或其他类似技术来更好地完成。也许我可能需要将takeWhile与someObservable主题合并？

我如何利用RXJS来解决这个问题？

解决方法

takeUntil是您想要的运算符

this.someObservable.pipe(
  takeUntil(this.kill.pipe(filter(val => val === killValue)))
).subscribe(() => ...)

kill观察对象一旦发出killValue，它将通过过滤器并发出给takeUntil，后者取消订阅该流。

const { timer,fromEvent,Subject } = rxjs;

const { takeUntil,filter } = rxjs.operators;

const kill$ = new Subject();

kill$.subscribe(val => {
  console.log(val);
});

timer(500,500).pipe(
  takeUntil(kill$.pipe(filter(val => val === 'kill')))
).subscribe(val => {
  console.log(val);
});

document.getElementById('rnd').addEventListener('click',() => {
  kill$.next(Math.random());
});

document.getElementById('kill').addEventListener('click',() => {
  kill$.next('kill');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.2/rxjs.umd.min.js"></script>
<button id="rnd">Emit random</button>
<button id="kill">Emit kill</button>