Question

我有搜索输入：

<input type="text" (ngModelChange)="projectFilter()">

用户键入时，每次更改模型后都会调用projectFilter函数。

如何使用ngxs实施反跳功能？

例如仅在用户完成输入后0.5秒后才分派动作？

  projectFilter() {
      this.store.dispatch([
        new SomeAction()
      );
    });
  }

Answer 1

一种方法是使用BehaviorSubject创建一个可观察的链，该链以debounceTime()分派动作。

// somewhere in your component class
projectFilter$ = new BehaviorSubject<string>('')

projectFilter() {
  // set next value instead of dispatching
  this.projectFilter$.next('current value')
}

ngOnInit() {
    // debounce whenever a new value is available with debounce
    this.projectFilter$.pipe(
      debounceTime(1000),
      tap(() => {
        this.store.dispatch(new MyAction())
      })
    ).subscribe()
}

注意：代码未经测试。只需使用它即可了解概念并相应地实施。

或者，您可能想使用反应形式。这样一来，您可以免费获得valueChanges之类的东西。

希望这会有所帮助。

如何实现ngxs操作的反跳模拟？

1 个答案: