typescript 仅当在特定时间间隔内未调用方法时,才会发生Angular 发射事件

thtygnil  于 2023-02-25  发布在  TypeScript
关注(0)|答案(2)|浏览(129)

我有一个输入字段,它在输入改变时立即调用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。

bvn4nwqk

bvn4nwqk1#

有趣的事实:常规Observable可以用作@Output(),而不是EventEmitter
在组件中,引入Subject来推送值,然后公开Observable,它使用debounceTime来控制发射。

class YourComponent {

  private value$ = new Subject();

  @Output() changed = this.value$.pipe(debounceTime(1000));

  public inputChanged(value: string): void {
      this.value$.next(value + ...)
  }

}

这里有一个StackBlitz的小演示。

ne5o7dgx

ne5o7dgx2#

若要仅在输入字段在Angular 中停止更改时才发出事件,可以使用RxJS库中的debounceTime运算符。此运算符将可观察值的发出延迟指定的时间量,并且仅在指定的时间过去后才发出最新的值,而不会发出任何新值。
下面的示例说明如何使用debounceTime仅在输入字段停止更改一段时间后才发出事件:
从组件中的RxJS库导入debounceTime运算符:

import { debounceTime } from 'rxjs/operators';

在组件中创建一个新Subject来表示输入字段值:

import { Component, EventEmitter, Output } from '@angular/core';
import { Subject } from 'rxjs';

@Component({
selector: 'app-input-field',
template: `
<input type="text" (input)="onInput($event.target.value)">
`
})
export class InputFieldComponent {
@Output() valueChanged = new EventEmitter<string>();

private value$ = new Subject<string>();

constructor() {
this.value$
  .pipe(
    debounceTime(500) // wait 500ms before emitting value
  )
  .subscribe(value => {
    this.valueChanged.emit(value);
  });
 }

onInput(value: string) {
this.value$.next(value);
}
}

在onInput方法中,通过值$ Subject发出输入字段值:

onInput(value: string) 
  {
   this.value$.next(value);
  }

在构造函数中,使用debounceTime运算符延迟从值$ Subject开始的值的发出,并在指定时间过后没有发出任何新值时发出最近的值:

constructor() {
  this.value$
  .pipe(
    debounceTime(500) // wait 500ms before emitting value
  )
  .subscribe(value => {
    this.valueChanged.emit(value);
  });
  }

通过使用debounceTime,valueChanged事件仅在输入字段值停止更改500毫秒时才会发出。如果需要,您可以将去抖时间调整为不同的值。

相关问题