Question

我试图创建类似isTyping的东西，所以我必须检测用户何时停止输入或多或少3秒，所以我可以做我的东西，我已经检测到他在打字时使用了这个：

     ngOnChanges(searchValue: string) {
    if (!this.searchChangeObserver) {
      Observable.create(observer => {
        this.searchChangeObserver = observer;
      }).debounceTime(3000) 
        .subscribe((data) => {
          if (data) {
            typingStuff();
          }
          else {
            notTypingStuff();
          }
        });
      this.searchChangeObserver.next(searchValue);
    }
  }
}

所以现在我必须检测用户何时停止输入以执行notTypingStuff（）;

有一种简单的方法吗？

修改

我也在使用它：

constructor(){
    this.modelChanged
      .debounceTime(300)
      .subscribe((data) => {
        if (data) {
          typingStuff();
        }
        else {
          notTypingStuff();
        }
      });
}

但是应该知道用户何时停止输入notTypingStuff()以及... {/ p>

Answer 1

我会访问用户正在键入的元素上的（keyup）事件，并检查事件触发后的时间是否为> = 3s。

Answer 2

对于不打字的东西，你可以从输入事件创建一个observable并设置debaunce时间：

HTML：

<input #yourElement [(ngModel)]="yourVar"/>

组件：

@ViewChild('yourElement') yourElement: ElementRef;

ngAfterViewInit() {
    Observable.fromEvent(this.yourElement.nativeElement, 'input')
        .map((event: Event) => (<HTMLInputElement>event.target).value)
        .debounceTime(3000)
        .distinctUntilChanged()
        .subscribe(data => notTypingStuff());
}

这样，您的方法只会在修改输入后执行3000，或者换句话说，在用户停止输入后执行。

Answer 3

Angular版本6。

HTML：

input matInput type =“ text”（keyup）=“ searchInterest（）” [（ngModel）] =“关键字” [matAutocomplete] =“ auto”>

组件：

public searchInterest() {
    let wordSearch = this.keyword;
    setTimeout(() => {
        if (wordSearch == this.keyword) {
            if (this.keyword) {
                //função que irá retornar sua lista de objetos
            }else{
                //code here
            }
        }
    }, 2000);
}

检测用户是否停止输入Angular 2

3 个答案: