Keyup事件下如何实现仅在输入值变更时才触发搜索请求

解决方案 #

核心是利用RxJS的distinctUntilChanged操作符过滤重复的搜索值，只有当搜索内容发生变更时才会发起后续API调用，实现方式如下： #

方案一：调整模板+组件逻辑（推荐，逻辑更清晰） #

1. 模板修改

如果你的需求是仅按回车触发搜索，可直接修改事件绑定，传递输入框值而非事件对象，减少后续处理步骤：

<input
  matInput
  type="search"
  (keyup.enter)="searchInputSubject.next(searchInput.value)"
  placeholder="Search"
  #searchInput
/>

如果需要保留边输入边触发搜索的逻辑，修改为：

<input
  matInput
  type="search"
  (keyup)="searchInputSubject.next(searchInput.value)"
  placeholder="Search"
  #searchInput
/>

2. 组件类逻辑修改

首先引入必要的RxJS操作符：

import { distinctUntilChanged } from 'rxjs';

在组件初始化阶段配置数据流处理：

// 定义搜索流，类型为字符串
searchInputSubject = new Subject<string>();

ngOnInit() {
  this.searchInputSubject.pipe(
    // 仅当前后两次搜索值不一致时才会向下传递数据
    distinctUntilChanged(),
    // 可选配置：添加防抖，避免输入过快频繁触发API，单位为毫秒
    // debounceTime(300)
  ).subscribe(searchKey => {
    // 调用你的搜索API逻辑
    this.callSearchApi(searchKey);
  });
}

private callSearchApi(keyword: string) {
  // 原有搜索API调用实现
}

方案二：不修改现有模板，仅调整组件逻辑 #

如果不想改动现有模板的事件绑定，可直接在组件中提取事件对应的值再做去重：

import { map, distinctUntilChanged } from 'rxjs';

// ...

ngOnInit() {
  this.searchInputSubject.pipe(
    // 从键盘事件中提取输入框的值
    map((event: KeyboardEvent) => (event.target as HTMLInputElement).value),
    // 去重处理
    distinctUntilChanged()
  ).subscribe(searchKey => {
    this.callSearchApi(searchKey);
  });
}

扩展配置 #

如果需要忽略搜索内容的前后空格、大小写差异，可传入自定义比对逻辑：

distinctUntilChanged((prev: string, curr: string) => {
  return prev.trim().toLowerCase() === curr.trim().toLowerCase();
})

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