import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'app-page-rxjs',
  templateUrl: './page-rxjs.component.html',
  styleUrls: ['./page-rxjs.component.scss']
})
export class PageRxjsComponent implements AfterViewInit {
  @ViewChild('inputBox') inputBox!: ElementRef;

  ngAfterViewInit() {
    const inputElement = this.inputBox.nativeElement;
    fromEvent(inputElement, 'input')
      .pipe(debounceTime(2000)) // 等待2000ms无新输入后，再执行
      .subscribe(() => {
        const value = inputElement.value;
        console.log('Print every 2000ms:', value);
      });
  }
}
