Angular 6中按键检测输入框值变化及distinctUntilChanged异常解决

嘿，我之前在Angular里处理输入流的时候也踩过这个distinctUntilChanged的坑！咱们先搞清楚问题出在哪，再一步步解决。

为什么会出现“逐个字符循环”的情况？ #

distinctUntilChanged默认用**全等运算符===**来比较前后值。对于输入框的文本来说，你每输入一个字符，都会生成一个全新的字符串实例（哪怕只是在原字符串后面加了个字符），这时候===会判定前后值是不同的，所以每次输入都会触发流的订阅逻辑，看起来就像“逐个字符循环执行”了。

这其实不是distinctUntilChanged的bug——它本来就是用来过滤连续重复的值，而你输入时的每一步值都是不同的，所以它自然会放行每一次变化。

解决方案分两种场景 #

根据你的实际需求，选对应的方案就行：

场景1：希望用户停止输入后再处理文本（最常见）

如果你的需求是“等用户输完一段内容，而不是敲一个字符就处理一次”，那把debounceTime和distinctUntilChanged结合起来用就对了：

import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

// 假设你用FormControl绑定输入框
inputControl = new FormControl('');

ngOnInit() {
  this.inputControl.valueChanges.pipe(
    debounceTime(300), // 等待300ms，确认用户停止输入
    distinctUntilChanged() // 过滤掉和上一次最终值重复的情况
  ).subscribe(inputText => {
    // 这里写你的文本处理逻辑
    console.log('处理后的文本:', inputText);
  });
}

模板里这样绑定：

<input type="text" [formControl]="inputControl" placeholder="输入文本试试">

场景2：需要自定义“相同值”的判断规则

如果你的需求是更精细的比较（比如忽略大小写、忽略空格），可以给distinctUntilChanged传一个自定义比较器：

this.inputControl.valueChanges.pipe(
  distinctUntilChanged((prevText, currText) => {
    // 自定义比较逻辑：忽略大小写和首尾空格
    return prevText.trim().toLowerCase() === currText.trim().toLowerCase();
  })
).subscribe(inputText => {
  // 处理逻辑
});

额外提醒：别用原生keyup事件替代valueChanges

如果你之前是用fromEvent监听原生keyup事件，那哪怕用户按方向键、回车这类不改变文本的按键，流也会触发。换成FormControl的valueChanges更靠谱——它只会在文本真正变化时才发射值。

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