使用rxjs为input添加一个angular节流input事件指令
- 首先, 引入依赖, 并创建指令
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;
constructor(el: ElementRef) {}
}
- 在构造函数中取得dom元素,并创建observable
constructor(el: ElementRef) {
this.input$ = fromEvent(el.nativeElement, 'input').pipe(debounceTime(300));
this.input$.subscribe((e) => this.handler(e));
}
- 使用
handleFilterChange(e) {
this.getList();
}
推荐阅读
- 为什么你的路演总会超时（）
- 知识
- 财商智慧课（六）
- 由浅入深理解AOP
- 低头思故乡——只是因为睡不着
- 【译】20个更有效地使用谷歌搜索的技巧
- 华为旁！大社区、地铁新盘，佳兆业城市广场五期！
- 吃了早餐，反而容易饿（为什么？）
- 你有婚内虐待行为吗（）
- mybatisplus如何在xml的连表查询中使用queryWrapper