我如何通过 RxJs 做到这一点？答案

【问题标题】：How do I do this via RxJs?我如何通过 RxJs 做到这一点？
【发布时间】：2018-02-23 11:39:38
【问题描述】：

我有一个自动完成控件，它在我从服务器检索结果的去抖动之后触发 onAutoCompleteSearch()。但是，如果用户输入文本并按回车键（键码 13），则应发出一个信号，取消自动完成的 next 调用。由于这是第 3 方控件，因此我无法控制在设置的去抖动时间之后发生的 onAutoCompleteSearch() 调用。

我正在使用 Subject 来发出信号：

private cancelAutoComplete$ = new Subject<boolean>();

如果用户按下回车键：

  onKeyUp(e) {
    if (e.keyCode === 13) {
      this.cancelAutoComplete$.next(true);   
      this.fireExecuteSearch();   // fire full search
    } else {
      this.fireSearchChange();    // trigger user input change
    }
  }

何时执行自动完成：

  onAutoCompleteSearch(e) {
    console.log('starting autocomplete!');

    this.cancelAutoComplete$
      .first()
      .defaultIfEmpty(false)
      .subscribe(c => {
        if (c) {
          console.log('autocomplete cancelled!');
        } else {
          console.log('execute the autocomplete!');
          this.executeAutoComplete.next(e.query);
        }
      });
  }

上面的操作不太好......我想做的是检查一个元素的cancelAutoComplete流，如果存在则将其从流中取出，如果取消标志为真，则中止自动完成。如果没有元素，则返回默认元素 false，以便我可以继续自动完成。

我怎样才能做到这一点？基本上，如果 onKeyUp -> keycode 13 事件有一个未决的取消信号，我想中止呼叫，如果不继续。

我知道我可以使用一个简单的布尔值来跟踪它，但想知道如何通过 RxJs 主题来做到这一点。

【问题讨论】：

只是将 cancelAutoComplete$ 的 BehaviorSubject 初始化为 false 的情况吗？

标签： rxjs

【解决方案1】：

首先，我将 cancelAutoComplete$ 设置为初始化为 false 的 BehaviorSubject。当 keyCode 不是 13 时发送false：

private cancelAutoComplete$ = new BehaviorSubject<boolean>(false);

onKeyUp(e) {
  if (e.keyCode === 13) {
    this.cancelAutoComplete$.next(true); // prevent autocomplete
    this.fireExecuteSearch();   
  } else {
    this.cancelAutoComplete$.next(false); // allow autocomplete   
    this.fireSearchChange();
  }
}

然后我将使用takeUntil 运算符作为executeAutoComplete 流的一部分，如下所示：

onAutoCompleteSearch(e) {
  this.executeAutoComplete.next(e.query);
}

this.executeAutoComplete
  .switchMap(query => this.backend.fetchAutoCompleteResults(query).takeUntil(
     this.cancelAutoComplete$.filter(c => c === true)
  ))
  .subscribe(...);

我假设您的后端 api 被命名为 this.backend.fetchAutoCompleteResults - 如果 cancelAutoComplete$ 最初是 true 或在通话进行时变为 true，则 takeUntil 将中止它。

【讨论】：