Question

在一个应用程序中，我需要在输入debounce上发送一个事件。

我正在尝试这个：

   @ViewChild('messageInput') messageInput: ElementRef;
   private inputTimeOutObservable: any;

    setTypingTimeOut(){
          this.inputTimeOutObservable = Observable.fromEvent(this.messageInput.nativeElement, 'input')
            .map((event: Event) => (<HTMLInputElement>event.target).value)
            .debounceTime(1000)
            .distinctUntilChanged()
            .subscribe(data => {
              this.sendEvent();
            });
    }
    ngOnDestroy() {
        if (this.inputTimeOutObservable) {
          this.inputTimeOutObservable.unsubscribe();
          this.inputTimeOutObservable = null;
        }
      }

输入做了其他的事情，但现在是：

 <input #messageInput id="message" type="text" (ngModelChange)="inputTextChanges($event)"
               [(ngModel)]="messageValue" (keyup)='keyUp.next($event)'>

事件没有被解雇，我不明白为什么在这里。有什么想法吗？

Answer 1

如果您不介意使用反应式表单控件，则可以执行以下操作：

import { FormControl } from '@angular/forms';

public myCtrl: FormControl = new FormControl();
myCtrl.valueChanges.debounceTime(1000).subscribe(value => ...);

您的模板变得更清晰：

<input #messageInput id="message" type="text" [formControl]="myCtrl">

以角度2输入去抖动

1 个答案: