最新版Ionic Angular中监听字符计数变化 解决删除字符总计数无法递减问题

现有逻辑的核心问题有两个：

• countDiff 中的判断 this.showCount === this.showCount - 1 逻辑不成立，同一变量的瞬时值不可能等于自身减1，所以永远无法触发日志
• 监听退格键的方案覆盖场景不全，批量选删、右键剪切、移动端删除等场景都无法被捕获，自然会出现统计不准的问题

你只需要额外新增一个变量存储上一次的字符计数，每次输入变更时直接对比新旧计数的大小，就能准确判断字符是否被删除，该方案能覆盖所有字符数变动的场景。

代码实现 #

变量声明 #

// 当前展示的字符数
showCount: number = 0;
// 存储上一次输入的字符数
lastCount: number = 0;

输入事件处理逻辑 #

// 输入事件触发时执行该方法
handleInput(event: any) {
  const currentCount = event.detail.value.length;
  // 字符数减少时触发逻辑
  if (currentCount < this.lastCount) {
    console.log("character is removed");
    // 此处补充总计数器递减的业务逻辑即可
    // 如需统计单次删除的字符数，可计算差值：const deleteCount = this.lastCount - currentCount
  }
  // 更新计数变量
  this.lastCount = currentCount;
  this.showCount = currentCount;
}

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