Question

我正在尝试创建自己的输入搜索组件，但不知何故，当我开始在输入文本中键入时，UI会阻塞，直到超时到达要执行的时间。我开始检查有关其内部行为的angular的文档，以检查我是否做错了什么或者想出其他的东西。我看到rxjs有Observable类，我可以使用timer（）和interval，两者都没有按预期工作。

这是我到目前为止为输入搜索组件编写的代码：

组件HTML

<input type="text" (keyup)="onInputChange($event)" class="form-control" />

组件.ts

import { Component, OnInit, Input, EventEmitter, Output } from "@angular/core";

@Component({
  selector: "app-input-search",
  templateUrl: "./input-search.component.html",
  styleUrls: ["./input-search.component.css"]
})
export class InputSearchComponent implements OnInit {
  @Output()
  onChange: EventEmitter<{ event: any; value: string }> = new EventEmitter();
  @Input() milliSeconds: number;

  timeoutHandler: any;

  constructor() {}

  ngOnInit() {}

  onInputChange(e) {
    if (this.milliSeconds && this.milliSeconds > 0) {
      if (this.timeoutHandler) {
        clearTimeout(this.timeoutHandler);
      }
      this.timeoutHandler = setTimeout(
        () => this.onChange.emit({ event: e, value: e.target.value }),
        this.milliSeconds
      );
    } else {
      if (this.timeoutHandler) {
        clearTimeout(this.timeoutHandler);
      }
      this.onChange.emit({ event: e, value: e.target.value });
    }

    return false;
  }
}

Answer 1

我明白了。它与动态菜单的渲染有关。我的意思是我没有使用最好的方法来处理它。

为什么我的Angular 5应用程序在使用setTimeout（），Observable.timer或Observable.interval（）时会阻止UI？

1 个答案: