RxJS中distinctUntilChanged搭配switchMap不生效该如何解决？

你每次调用searchVal方法时都会新建一个独立的Observable实例，而distinctUntilChanged的去重逻辑是基于同一个流上先后发出的两个值做比对，每个新的Observable只会接收一次val参数，不存在前后两次值的上下文关联，自然无法实现去重，添加debounceTime也不会生效，因为防抖同样依赖同一个流的连续事件序列。

你需要创建一个持久化的事件流（用RxJS Subject实现），所有搜索值都推入同一个流，再在这个流上统一添加去重、防抖、请求切换逻辑，具体实现代码如下：

首先定义类属性：

// 搜索事件源，所有搜索值都通过这个Subject推送
private searchSubject = new Subject<string>();
// 建议列表结果流
public suggestions: Observable<any[]>;
// 销毁信号，你原有代码里已经有这个变量了
private destroy$ = new Subject<void>();

在组件初始化时订阅流、挂载操作符：

ngOnInit(): void {
  this.suggestions = this.searchSubject.pipe(
    takeUntil(this.destroy$),
    // 可选：添加300ms防抖，避免输入过程中频繁触发
    debounceTime(300),
    // 前后值相同就过滤，字符串类型用默认比对逻辑即可
    distinctUntilChanged(),
    switchMap((query: string) => {
      if (!query) return of([]);
      console.log('触发搜索请求，查询值：', query);
      // 此处替换为你的实际搜索接口请求即可
      // return this.http.get(`/your/search/api?keyword=${query}`)
      return of([]);
    })
  );
}

修改searchVal方法，仅负责向事件源推送新的搜索值：

public searchVal(val: string): void {
  this.searchSubject.next(val);
}

最后别忘了组件销毁时发送销毁信号，避免内存泄漏：

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

如果后续需要比对的是对象类型的搜索参数，需要给distinctUntilChanged传入自定义比对函数，示例：

distinctUntilChanged((prev, curr) => prev.keyword === curr.keyword && prev.type === curr.type)

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