Angular 2 - 消除 keyUp 事件答案

【问题标题】：Angular 2 - Debouncing a keyUp eventAngular 2 - 消除 keyUp 事件
【发布时间】：2017-03-13 10:18:09
【问题描述】：

如何消除在“keyUp”事件上调用的函数？

这是我的代码：

我的功能

private handleSearch(searchTextValue: string, skip?: number): void {
    this.searchTextValue = searchTextValue;
    if (this.skip === 0 || typeof skip === "undefined") {
        this.skip = 0;
        this.pageIndex = 1;
    } else {
        this.skip = skip;
    }
    this.searchTextChanged.emit({ searchTextValue: searchTextValue, skip: this.skip, take: this.itemsPerPage });
}

我的 HTML

<input type="text" class="form-control" placeholder="{{ 'searchquery' | translate }}" id="searchText" #searchText (keyup)="handleSearch(searchText.value)">

基本上我想要实现的是handleSearch 在用户停止输入后不久被调用。

我发现我可以为此使用 lodash 的 _debounce()，但我还没有找到如何将它放在我的 keyUp 事件中。

【问题讨论】：

标签： angular lodash debounce

【解决方案1】：

更新： 使用 RXJS 6 管道运算符：

this.subject.pipe(
  debounceTime(500)
).subscribe(searchTextValue => {
  this.handleSearch(searchTextValue);
});

您可以创建一个 rxjs/Subject 并在 keyup 上调用 .next() 并使用您想要的 debounceTime 订阅它。

我不确定这是否是正确的方法，但它确实有效。

private subject: Subject<string> = new Subject();

ngOnInit() {
  this.subject.debounceTime(500).subscribe(searchTextValue => {
    this.handleSearch(searchTextValue);
  });
}

onKeyUp(searchTextValue: string){
  this.subject.next(searchTextValue);
}

HTML：

<input (keyup)="onKeyUp(searchText.value)">

【讨论】：

如何将参数传递给ngOnInit() { this.subject.debounceTime(500).subscribe(res => { //do something }); }？
您可以将搜索查询传递给 onKeyUp()，然后将其传递给 .next()，然后它将成为订阅中的“res”变量。确保在处理字符串时将主题从 Subject 更改为 Subject。让我编辑答案。
如果我有 1 个可选参数？我应该把它们放在一个物体里吗？在 OP 中，我依赖 searchTextValue 和 skip 这是可选的
我又编辑了一遍。关于skip，只需在你的组件中创建一个skip变量并在handleSearch方法中使用它，如下所示：if(this.skip)
别忘了导入 'rxjs/add/operator/debounceTime'

【解决方案2】：

Rx/JS 6 的更新。使用管道运算符。

import { debounceTime } from 'rxjs/operators';

this.subject.pipe(
      debounceTime(500)
    ).subscribe(searchTextValue => {
      this.handleSearch(searchTextValue);
    });

其他都一样?

【讨论】：

【解决方案3】：

在这里查看答案：https://stackoverflow.com/a/35992325/751200

这里有文章：https://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html（很旧，但还不错）。

基本上，您可以使用 Angular Forms 提供的 Observable 对象。

例如，this.myFormGroup.get("searchText").valueChanges.pipe(debounceTime(500), distinctUntilChanged()).subscribe(...)

如果您需要在用户停止输入时执行 HTTP 请求，您可以将此类 HTTP 调用放入 switchMap 运算符并将其添加到 pipe 列表中：

this.myFormGroup.get("searchText")
                .valueChanges
                .pipe(debounceTime(500),
                      distinctUntilChanged(), 
                      switchMap((value: string) => {
                          return this.service.getData(value);
                      }))
                .subscribe((valueFromRest) => { ... });

switchMap 中的魔法会自动取消之前的 HTTP 请求（如果尚未完成）并自动启动新的请求。

【讨论】：