Angular 8中Rxjs distinctUntilChanged操作符失效问题求助

我来帮你排查一下distinctUntilChanged没生效的问题，大概率是这几个原因之一：

1. 流被重复订阅，导致distinctUntilChanged丢失历史对比值 #

如果你的组件因为*ngIf、路由切换或者父组件重新渲染等原因被销毁后重建，ngAfterViewInit会被再次调用，每次都会创建一个全新的Observable流。新的流没有之前的历史值，所以哪怕输入框内容没变化，第一次blur时distinctUntilChanged也会放行这个值，让你误以为它没生效。

验证方法： #

在ngAfterViewInit里加个日志，看看是不是多次执行了：

ngAfterViewInit() { 
  console.log('ngAfterViewInit triggered'); // 检查控制台是否多次输出这句话
  // 你的原有代码
}

解决方案： #

确保在组件销毁时正确触发unsubscribe$，清理旧订阅：

ngOnDestroy() {
  this.unsubscribe$.next();
  this.unsubscribe$.complete();
}

同时检查组件是否存在频繁销毁重建的场景（比如*ngIf条件频繁切换），必要时调整组件的渲染逻辑。

2. 输入框的值在blur时发生了隐性变化 #

有时候Angular表单控件（比如FormControl）或者自定义指令会在blur时自动修正值，比如自动去除首尾空格、格式化数字/日期等。这时候你肉眼看内容没变化，但实际evt.target.value已经和上一次发射的值不一样了，distinctUntilChanged自然会放行。

验证方法： #

在map操作符后加日志，查看每次blur拿到的具体值：

map((evt: any) => {
  const value = evt.target.value;
  console.log('Current value:', value, 'Length:', value.length); // 检查值内容和长度
  return value;
}),

比如如果发现两次blur的长度不一样，说明有隐性的空格被自动去除了。

解决方案： #

自定义distinctUntilChanged的比较逻辑，忽略这些无关变化：

// 示例：忽略首尾空格的差异
distinctUntilChanged((prev, curr) => prev.trim() === curr.trim())

3. 误解distinctUntilChanged的工作逻辑 #

distinctUntilChanged只会对比当前流中连续发射的两个值，如果流被重新订阅（比如组件重建）或者中间有操作符重置了流状态，它就会从头开始对比，不会记住之前流的历史值。

额外优化建议： #

如果需要跨组件生命周期记住上一次的值，可以把值存在组件属性里，自定义比较逻辑：

private lastHeadlineValue = '';

ngAfterViewInit() { 
  fromEvent(this.headlineInput.nativeElement, 'blur').pipe( 
    takeUntil(this.unsubscribe$), 
    map((evt: any) => evt.target.value),
    distinctUntilChanged((curr) => {
      const isSame = curr === this.lastHeadlineValue;
      if (!isSame) {
        this.lastHeadlineValue = curr;
      }
      return isSame;
    })
  ).subscribe((text: string) => { 
    this.onInputValueChanges(text); 
  }); 
}

先从第一个原因排查，看看ngAfterViewInit是不是被多次调用，这是最常见的情况哦！

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