条件可观察交互 RxJS答案

【问题标题】：Conditional observable interaction RxJS条件可观察交互 RxJS
【发布时间】：2018-10-25 20:19:08
【问题描述】：

我有以下观察：

this.searchValue$ = this.searchValue.valueChanges.pipe(
  startWith(''),
  debounceTime(500)
);

this.cardAmount$ = fromEvent(this.button.nativeElement, 'click').pipe(
  startWith(0),
  scan(count => count + 20, 0)
);

为代码添加更多上下文：searchValue$ 与输入字段更改相关，并发出更改的值。 cardAmount$ 与按钮按下有关。每次按下按钮时，它都会发出一个新值 20、40、60 等等。

一旦发出searchValue$，我想将cardAmount$ 的值“设置”回0。这样做的正确 RxJS 方式是什么？

【问题讨论】：

标签： javascript angular typescript rxjs observable

【解决方案1】：

听起来像是 switchMap 运算符的完美案例：

this.cardAmount$ = this.searchValue$
.pipe(switchMap( search =>
  fromEvent(this.button.nativeElement, 'click')
   .pipe(
    startWith(0),
    scan(count => count + 20, 0)
)));

每次 searchValue 发射都会生成一个从 0 开始的新 Observable。

【讨论】：

不会造成内存泄漏，因为您没有关闭以前对cardAmount$ 的订阅吗？
另外，这不会解除这些订阅的绑定，因为它们不会引用相同的内存引用吗？
之前的订阅在订阅新的 Observable 之前被 switchMap 操作符取消订阅。这是一个 stackblitz 演示：stackblitz.com/edit/stackoverflow-52988879 以及取消订阅的源代码：github.com/ReactiveX/rxjs/blob/…。我不知道您所说的订阅解除绑定是什么意思？
哦，你是对的，忘记了 switchMap 的那个功能！关于“解除绑定”，我的意思是当你写const x = this.cardAmount$.subscribe(...) 时，你订阅了一个内存引用，所以如果你将它更改为另一个，那不是“解除绑定”或“取消”（抱歉不是母语人士）这个订阅，意味着你必须再次订阅新的内存引用？
（这只是出于好奇，我自己也在学习 RxJs，所以请为您的简洁精益代码投票）

【解决方案2】：

您不能使用此代码（据我所知）。

为此，您将需要一个同时充当可观察者和观察者的代理。否则，您无法在流中发出值。

试试BehaviorSubject：

this.searchValue$ = this.searchValue.valueChanges.pipe(
  startWith(''),
  debounceTime(500),
  tap(() => this.cardAmount.next(0)),
);

this.cardAmount$ = new BehaviorSubject(0);

fromEvent(this.button.nativeElement, 'click').pipe(
  startWith(0),
  switchMap(() => this.cardAmount$),
).subscribe(curr => this.cardAmount$.next(curr + 20));

我稍微更改了最后一个观察者，因为如果您不这样做并保留之前的观察者，则计数值不会关心值更改的重置。为了确保它确实关心，您必须使用观察者的当前值。

【讨论】：