使用rxjs为input添加一个angular节流input事件指令

1. 首先, 引入依赖, 并创建指令

import { Directive, ElementRef, Input } from '@angular/core';
import { fromEvent, Observable } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Directive({
    selector: '[onDebounceInput]'
})
export class OnDebounceInput {
    @Input('onDebounceInput') handler: (e?) => void = () => {};
    input$: Observable<any>;
    constructor(el: ElementRef) {}
}

2. 在构造函数中取得dom元素,并创建observable

    constructor(el: ElementRef) {
        this.input$ = fromEvent(el.nativeElement, 'input').pipe(debounceTime(300));
        this.input$.subscribe((e) => this.handler(e));
    }

3. 使用

<input
  nz-input
  [(ngModel)]="text"
  [onDebounceInput]="handleFilterChange"
/>

handleFilterChange(e) {
  this.getList();
}