Angular 如何为PipeTransform自定义过滤管道添加防抖功能？

通过RxJS的debounceTime操作符监听输入框值变化，生成防抖后的过滤关键词，管道绑定该关键词即可实现延迟触发，具体修改如下：

1. 修改组件代码（Component.ts） #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormBuilder } from '@angular/forms';
// 引入RxJS依赖
import { Subject, takeUntil, debounceTime } from 'rxjs';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
})
export class TestComponent implements OnInit, OnDestroy {
  nicks: string[] = ['Siema', 'Elo', 'Tu', 'Hdw3DCtV', 'and', 'Gównow', 'Zdzisiu11', 'Zdzisiu1','Zdzisiu2','Zdzisiu3','Zdzisiu4','Zdzisiu5'];
  // 防抖后的过滤关键词
  debouncedNick = '';
  // 用于组件销毁时取消订阅，避免内存泄漏
  private destroy$ = new Subject<void>();

  constructor(private formBuilder: FormBuilder) {}

  filterForm = this.formBuilder.group({
    nick: ['']
  })

  ngOnInit(): void {
    // 监听输入框值变化，加500ms防抖
    this.filterForm.get('nick')!.valueChanges
      .pipe(
        debounceTime(500),
        takeUntil(this.destroy$)
      )
      .subscribe(val => {
        this.debouncedNick = val || '';
      });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

2. 修改HTML模板 #

将管道的过滤参数替换为防抖后的变量即可，其他代码无需改动：

<div class="test-ctr">
  <div class="form-ctr">
    <form class="example-form" [formGroup]="filterForm">
      <input formControlName="nick" placeholder="ex. hdw"> 
    </form>
  </div>
  <div class="app-cards-ctr">
    <!-- 仅修改此处管道参数为debouncedNick -->
    <div class="app-card-ctr" *ngFor="let nick of nicks | filterPipe: debouncedNick">
      <app-card [nick]="nick"></app-card>
    </div>
  </div>
</div>

3. 原有FilterPipe无需修改 #

现有过滤逻辑可以直接复用，不需要调整。

实现原理 #

原方案直接绑定FormControl的实时值，每次输入变更都会触发纯管道重新计算。修改后只有当用户停止输入500ms后，才会更新debouncedNick变量，而纯管道仅在输入参数发生变化时才会重新执行，自然实现了延迟过滤的效果。

内容的提问来源于stack exchange，提问作者hdw3