angularでdebounce

以下のようにnew Subjectでオブジェクトを作成しておいて、debounceTimeを設定するとデバウンスができる

import { Component,HostListener } from '@angular/core';
import {Subject} from 'rxjs/Subject'
import 'rxjs/Rx'
 
@Component({
  selector: 'app-root',
  template: `
    <input (input)="subject.next($event.target.value)">
  `,
})
 
export class AppComponent {
  subject = new Subject();
  constructor() {
    this.subject.debounceTime(1000).subscribe((v) => {
      console.log(v);
    })
  }
}

ただ、このままだとChange Detectionのdebounceができないので以下のように調整する

@Directive({
  selector: 'input[debounceInput]'
})
export class DebounceInput {
  @Output() onInput = new EventEmitter();

  constructor(
    private _elementRef: ElementRef,
    private _zone: NgZone,
  ) {
    this._zone.runOutsideAngular(() => {
      Observable
        .fromEvent(this._elementRef.nativeElement, 'input')
        .debounceTime(1000)
        .subscribe((ev:any) => {
          this._zone.run(() => this.onInput.emit(ev));
        });
    });
  }
}

参考：Angularでイベントから無駄にChange Detectionを走らせないためにすべきこと - Qiita