关于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(); // 请求数据接口函数
};
每一个人心中都有一团火,路过的人只看到烟!