关于angular中自定义防抖指令的实现

angular对于input的防抖功能实现借用rxjs的debounceTime实现

定义directive.ts指令文件

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

@Directive({
    selector: '[appDebounceInput]'
})
export class DebounceInputDirective {
    input$: Observable<any>;
    // tslint:disable-next-line:no-input-rename
    @Input('appDebounceInput') handler: (e?) => void = () => {};
    constructor(el: ElementRef) {
        this.input$ = fromEvent(el.nativeElement, 'input').pipe(debounceTime(500));
        this.input$.subscribe(this.handleChange);
    }
    handleChange = e => {
        this.handler(e);
    };
}

全局共享shareModle中引入

import { ModuleWithProviders, NgModule } from '@angular/core';
import { AngularDraggableModule } from 'angular2-draggable';
import { CommonModule } from '@angular/common';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { NgZorroAntdModule } from 'ng-zorro-antd';

import { HyphenateSpacesPipe } from './hyphenate-spaces.pipe';

import { PaginatorComponent } from '../layouts/paginator/paginator.component';
import { TableFooterComponent } from '../layouts/table-footer/table-footer.component';
import { NgxeditorComponent } from 'app/shared/ngxeditor/ngxeditor.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UnceremoniousViewDirective } from 'app/modules/directives/unceremonious-view.directive';
import { SchedulingComponent } from 'app/shared/scheduling/scheduling.component';
import { ScheduleFormComponent } from 'app/shared/scheduling/schedule-form/schedule-form.component';
import { RangeFormComponent } from 'app/shared/scheduling/range-form/range-form.component';
import { RecurrenceDailyFormComponent } from 'app/shared/scheduling/recurrence-daily-form/recurrence-daily-form.component';
import { RecurrenceMonthlyFormComponent } from 'app/shared/scheduling/recurrence-monthly-form/recurrence-monthly-form.component';
import { RecurrenceWeeklyFormComponent } from 'app/shared/scheduling/recurrence-weekly-form/recurrence-weekly-form.component';
import { RecurrenceYearlyFormComponent } from 'app/shared/scheduling/recurrence-yearly-form/recurrence-yearly-form.component';
import { BullySubjectService, ToolsService } from 'app/shared/services';
import { BytetobasePipePipe, ToFixed2pointPipePipe } from 'app/common-event-detail/response-plan/bitetobase-pipe.pipe';
import { MsgService } from 'app/shared/services/msg.service';
import { TranslateModule } from '@ngx-translate/core';
import { DebounceInputDirective } from 'app/shared/debounce-input.directive';
import { CarouselComponent } from 'app/shared/carousel/carousel.component';
import { AlarmSubscriptionListComponent } from 'app/shared/alarm-subscription-list/alarm-subscription-list.component';
import { SelectTrDirective } from 'app/shared/select-tr.directive';

@NgModule({
    imports: [
        AngularDraggableModule,
        CommonModule,
        FontAwesomeModule,
        NgZorroAntdModule,
        FormsModule,
        ReactiveFormsModule,
        TranslateModule
    ],
    declarations: [
        HyphenateSpacesPipe,
        PaginatorComponent,
        TableFooterComponent,
        DebounceInputDirective,
        NgxeditorComponent,
        CarouselComponent,
        UnceremoniousViewDirective,
        SchedulingComponent,
        ScheduleFormComponent,
        RangeFormComponent,
        RecurrenceDailyFormComponent,
        RecurrenceMonthlyFormComponent,
        RecurrenceWeeklyFormComponent,
        RecurrenceYearlyFormComponent,
        BytetobasePipePipe,
        ToFixed2pointPipePipe,
        AlarmSubscriptionListComponent,
        SelectTrDirective
    ],
    exports: [
        AngularDraggableModule,
        CommonModule,
        FontAwesomeModule,
        HyphenateSpacesPipe,
        NgZorroAntdModule,
        PaginatorComponent,
        TableFooterComponent,
        NgxeditorComponent,
        CarouselComponent,
        DebounceInputDirective,
        UnceremoniousViewDirective,
        SchedulingComponent,
        BytetobasePipePipe,
        ToFixed2pointPipePipe,
        AlarmSubscriptionListComponent,
        SelectTrDirective
    ],
    providers: [ToolsService, MsgService]
})
export class SharedModule {
    // @ts-ignore
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: [BullySubjectService]
        };
    }
}

component.html模板中使用

 <div class="table-search">
   <input  placeholder="Search..." class="skin2" [appDebounceInput]="search" [(ngModel)]="item.value" nz-input/>
   <i class="fa fa-search" ></i>
 </div>

component.ts中定义执行函数

 search = () => {
        this.getList(); // 请求数据接口函数
    };