Angular防抖指令——输入事件

input输入框，例如搜索框，每输入一个字符便向后台查询一遍会增加服务端负担，而且对前端的显示体验也不好；所以就需要防抖设计了，angular中的防抖可以利用rxjs中的debounceTime实现，具体的还可以设计以下防抖输入指令，以便于使用：

注意  rxjs版本     "rxjs": "~6.3.3",

使用示例：

import {Directive, HostListener, Input, EventEmitter, Output, OnDestroy, OnInit} from '@angular/core';
import {debounceTime} from 'rxjs/operators';
import {Subject, Subscription} from 'rxjs';

@Directive({
  selector: 'input[appDebounceInput]'
})
export class DebounceInputDirective implements OnInit, OnDestroy {
  @Input('appDebounceInput') debounceTime = 500;
  @Output() debounceInput = new EventEmitter();
  private inputs = new Subject();
  private subscription: Subscription;

  constructor() {
  }

  @HostListener('input', ['event'])
  clickEvent() {
    event.preventDefault();
    event.stopPropagation();
    const value = event.srcElement['value'];
    console.log(value);
    this.inputs.next(value);
  }

  ngOnInit(): void {
    this.subscription = this.inputs.pipe(
      debounceTime(this.debounceTime)
    ).subscribe(e => this.debounceInput.emit(e));
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

}