Angular中distinctUntilChanged如何阻止input blur事件流首次空白值发射

根因分析 #

distinctUntilChanged 操作符默认无前置缓存值，流中首次发射的任意值都会直接放行，因此页面加载后第一次触发blur事件时，即使输入框值为空也会触发订阅逻辑。

修复方案 #

通过 startWith 操作符传入输入框初始值作为 distinctUntilChanged 的首次对比基准，首次blur时若值与初始值一致就会被拦截，仅在前后值不一致时才会发射：

fromEvent(this.input.nativeElement, 'blur')
  .pipe(
    takeUntil(this.unsubscribe$),
    map((evt: any) => evt.target.value),
    // 新增：传入输入框初始值作为首次对比的前置值
    startWith(this.input.nativeElement.value),
    distinctUntilChanged(
      (pre: string, curr: string) => pre === curr
      // 原始对比用JSON.stringify属于冗余操作，input输出的都是字符串类型，直接全等对比即可
    )
  )
  .subscribe((caption: string) => {
    console.log(caption)
  })

补充说明 #

• 本方案兼容后续空值的合法发射场景：如果用户先输入非空内容再清空输入框触发blur，此时上一次缓存值为非空内容，空值会正常触发后续逻辑，符合「前后值不一致就触发」的需求。
• 如果需要完全过滤所有空值发射，可在 map 操作符后新增 filter((v: string) => v.trim() !== '') 即可。
• 注意需提前从 rxjs/operators 中导入 startWith 操作符。

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