Javascript 条件可观测相互作用RxJS

我有以下观察结果：

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$

后将

cardamunt$

的值“设置”回0。RxJS的正确做法是什么？

据我所知，这段代码是无法使用的

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

尝试使用

行为主题

：

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));

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

据我所知，您无法使用此代码

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

尝试使用

行为主题

：

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));

---

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

听起来像是

switchMap

操作符的完美案例：

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

---

从0开始的新观察值将在每个searchValue发射上生成。

听起来像是

开关映射

操作符的完美案例：

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

---

每次发出searchValue时，都会生成一个从0开始的新的可观察值。

这不会造成内存泄漏，因为您没有关闭以前对

cardAmount$

的订阅吗？而且，这不会解除这些订阅的绑定，因为它们不会引用相同的内存引用？在订阅新的可观察对象之前，switchMap操作符会取消订阅以前的订阅。以下是stackblitz的演示：以及取消订阅的源代码：。我不明白你所说的解除绑定是什么意思？哦，你说得对，忘了switchMap的那个功能！关于“解除绑定”，我的意思是，当您编写

const x=this.cardamuty$.subscribe（…）

时，您订阅了一个内存引用，因此如果您将其更改为另一个，那么“解除绑定”或“取消”（对不起，不是母语人士）该订阅不是意味着您必须再次订阅新的内存引用吗？（这只是出于好奇，我自己也在学习RxJs，所以我对你的干净精简代码投赞成票）由于您没有关闭以前对

cardAmount$

的订阅，这不会造成内存泄漏吗？另外，由于这些订阅不会引用相同的内存引用，所以不会解除这些订阅的绑定吗？之前的订阅在订阅新的Observable之前会被switchMap操作符取消订阅帽子：取消订阅的源代码：。我不明白你所说的订阅解除绑定是什么意思？哦，你是对的，忘了switchMap的功能！关于“解除绑定”，我的意思是当你写

const x=this.cardamuty$.subscribe（…）

，您订阅了一个内存引用，因此如果您将其更改为另一个，那么“取消绑定”或“取消”（对不起，不是母语人士）这不是意味着您必须再次订阅新的内存引用吗？（这只是出于好奇，我自己正在学习RxJs，所以请支持您的干净和精简代码）