javascript - Angular 为 2 的输入去抖动

Question

在应用程序中，我需要在输入去抖动时发送一个事件。

我正在尝试这个:

   @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

根据您的代码，这是一个工作示例:

component.html

<input #messageInput id="message" type="text" [(ngModel)]="messageValue">

component.ts

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {Observable} from "rxjs/Rx";

@Component({
  selector: 'app-input-debounce',
  templateUrl: './input-debounce.component.html',
  styleUrls: ['./input-debounce.component.css']
})
export class InputDebounceComponent implements OnInit {
  @ViewChild('messageInput') messageInput: ElementRef;
  public messageValue: string = "";
  private inputTimeOutObservable: any;

  constructor() {
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.setTypingTimeOut();
  }

  setTypingTimeOut() {

    this.inputTimeOutObservable = Observable.fromEvent(this.messageInput.nativeElement, 'input')
      .map((event: Event) => (<HTMLInputElement>event.target).value)
      .debounceTime(1000)
      .distinctUntilChanged()
      .subscribe(data => {
        console.log(this.messageValue);
        console.timeEnd("Input changed after."); // No matter how frequent you type, this will always be > 1000ms
        console.time("Input changed after."); // start track input change fire time
      });
  }

}