带 debounceTime 和 onFocusOut 的 angular 2 搜索输入答案

【问题标题】：angular 2 search input with debounceTime and onFocusOut带 debounceTime 和 onFocusOut 的 angular 2 搜索输入
【发布时间】：2018-08-23 04:27:52
【问题描述】：

我的搜索输入有问题。在 Angular 2 项目中，我有搜索输入：

 <input [(ngModel)]="data.value" (keyup)="input$.next($event)" (focusout)="onFocusOut($event)" />

在我的打字稿上：

input$ = new Subject<any>();
ngOnInit() {
  this.input$
    .do(this.keyUpEventHandler.bind(this))
    .debounceTime(3000)
    .distinctUntilChanged()
    .subscribe((value) => {
      console.log('afterDebounce', value);
// do http request in service
        });
  }

  onFocusOut(event) {
    //this.input$.skipLast(1);
   // do http request in service immediately 
  }

我的问题是当我输入...并单击输入时，我的输入组件只是失去了焦点，我调用了 http 请求，但 3 秒后又再次调用。是否有任何解决方案可以解决 input$ 可观察到的下一个问题？

我不喜欢取消订阅整个 observable，因为我想稍后使用它（如果用户想搜索数据）谢谢！

【问题讨论】：

标签： angular rxjs angular2-forms

【解决方案1】：

您可以创建两个数据流，一个用于“keyUp”事件，一个用于“blur”事件。比用一点 RxJs 魔法做以下事情：

@ViewChild('searchValueInput') searchValueInput: any;

constructor(private http: HttpClient) {
      }

ngAfterViewInit() {
    this.subscribeToInputChanges();
    }

subscribeToInputChanges(){
  let keyUp$:Observable<any>=Observable.fromEvent     
  (this.searchValueInput.nativeElement, 'keyup')
    .debounceTime(3000)
    .distinctUntilChanged();

let focusOut$:Observable<any>=Observable
.fromEvent(this.searchValueInput.nativeElement, 'blur');

  Observable.defer(()=>Observable.race(
    keyUp$,
    focusOut$
  ))
  .take(1)
  .repeat()
  .subscribe(res=>{
    this.http.get('someURL')
    .subscribe(response=>{
      //Handle response
    })
  })
}

任何你的html：

  <input #searchValueInput type="text" class="search" placeholder="Search">

keyUp$ observable 与您创建的相同。 focusOut$ observable 对 keyUp$ 来说非常苗条，它是从 'blur' 事件创建并立即发出数据（没有 debounceTime）。

我们使用 race operator 将它们组合在一起，女巫告诉 observable 使用第一个发出的 observable。

我们还将这个'race' observable 包装在另一个defer observable 中。 take(1) 和 repeat() 的 defer observable 负责保持订阅活动，并不总是使用相同的 observable（keyUp$ 或 focusOut$）。

我创建了一个小的stackblitz，在一个工作示例中展示了以上所有内容。

【讨论】：

非常感谢！你让我开心:)