Angular防抖指令——输入事件_angular rxjs debounce

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

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

使用示例： <input [appDebounceInput]="700" (debounceInput)="dealInput($event)" />

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();