我有一个输入字段,它在输入改变时立即调用inputChanged
方法,如下所示:
<custom-input (altered)="inputChanged($event)"
...
>
@Output()
public changed: EventEmitter<string> = new EventEmitter();
...
public inputChanged(value: string): void {
this.changed.emit(value + ...)
}
我试图实现的是,只有在上次调用inputChanged
的时间超过1000ms之前才触发this.changed.emit(value + ...)
。
所以序列可能是这样的。
一个月三个月一次-〉100毫秒-〉一个月四个月一次-〉200毫秒-〉一个月五个月一次-〉50毫秒-〉一个月六个月一次-〉1000毫秒-〉一个月七个月一次
我在rxjs中找到了一些类似debounceTime的东西,但是我不知道如何在我的上下文中使用它,因为我不被允许修改输入字段组件本身。实现必须在使用输入字段的组件中。
有人能帮帮我吗?
仅供参考:我使用的是Angular 15。
2条答案
按热度按时间bvn4nwqk1#
有趣的事实:常规
Observable
可以用作@Output()
,而不是EventEmitter
。在组件中,引入Subject来推送值,然后公开Observable,它使用
debounceTime
来控制发射。这里有一个StackBlitz的小演示。
ne5o7dgx2#
若要仅在输入字段在Angular 中停止更改时才发出事件,可以使用RxJS库中的debounceTime运算符。此运算符将可观察值的发出延迟指定的时间量,并且仅在指定的时间过去后才发出最新的值,而不会发出任何新值。
下面的示例说明如何使用debounceTime仅在输入字段停止更改一段时间后才发出事件:
从组件中的RxJS库导入debounceTime运算符:
在组件中创建一个新Subject来表示输入字段值:
在onInput方法中,通过值$ Subject发出输入字段值:
在构造函数中,使用debounceTime运算符延迟从值$ Subject开始的值的发出,并在指定时间过后没有发出任何新值时发出最近的值:
通过使用debounceTime,valueChanged事件仅在输入字段值停止更改500毫秒时才会发出。如果需要,您可以将去抖时间调整为不同的值。