要使 PipeTransform 具有防抖功能,我们可以使用 RxJS 中的 debounceTime 操作符。
首先,我们需要引入 debounceTime 操作符:
import { debounceTime } from 'rxjs/operators';
然后再创建一个管道并为它添加 debounceTime 操作符:
import { Pipe, PipeTransform } from '@angular/core'; import { debounceTime } from 'rxjs/operators';
@Pipe({name: 'debounce'}) export class DebouncePipe implements PipeTransform { transform(value: string, time: number): any { return value.pipe( debounceTime(time) ); } }
最后,在 HTML 模板中使用管道:
这将给出一个具有 500ms 防抖功能的搜索框。