如何使用 rxjs 在 angular2 中实现输入 keyup 事件的去抖服务

我正在尝试在输入按键事件上调用服务。

The HTML

<input placeholder="enter name" (keyup)='onKeyUp($event)'>

下面是onKeyUp()功能

onKeyUp(event) {
    let observable = Observable.fromEvent(event.target, 'keyup')
        .map(value => event.target.value)
        .debounceTime(1000)
        .distinctUntilChanged()
        .flatMap((search) => {
            // call the service
        });
    observable.subscribe((data) => {
        // data
    });
}

从浏览器的网络选项卡中发现，它在每个按键事件上调用按键函数（正如它应该做的那样），但我想要实现的是每个按键之间的去抖时间为 1 秒服务电话。另外，如果我移动箭头键，该事件也会被触发。

笨蛋链接 http://plnkr.co/edit/2YOezky5qB2h4tzXojzi?p=info

所以这条链确实是正确的，但问题是你正在创建一个 Observable 并在每个keyup事件。这就是为什么它多次打印相同的值。只是有多个订阅，这不是您想要做的。

显然还有更多方法可以正确地做到这一点，例如：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="text" (keyup)='keyUp.next($event)'>
    </div>
  `,
})
export class App implements OnDestroy {

  public keyUp = new Subject<KeyboardEvent>();

  private subscription: Subscription;

  constructor() {
    this.subscription = this.keyUp.pipe(
      map(event => event.target.value),
      debounceTime(1000),
      distinctUntilChanged(),
      mergeMap(search => of(search).pipe(
        delay(500),
      )),
    ).subscribe(console.log);
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

查看您更新的演示：http://plnkr.co/edit/mAMlgycTcvrYf7509DOP http://plnkr.co/edit/mAMlgycTcvrYf7509DOP

2019 年 1 月：更新了 RxJS 6