Angular 2/5中如何监听从组件绑定的ngModel值变化？

我明白你的需求啦——这个Estimate输入框既要能跟着其他输入框自动更新，又得允许手动修改，还得在它的值不管是自动更新还是手动修改时，都能触发你的自定义代码。下面给你几个实用的方案，比你尝试的IterableDiffers更适合这个场景（IterableDiffers主要是用来监听数组/可迭代对象变化的，单值监听用不上它哦）：

方案一：使用响应式表单FormControl（最推荐） #

响应式表单的FormControl自带的valueChanges可以监听所有值的变化，不管是代码触发的更新还是用户手动输入，都能捕获到，非常省心。

代码示例： #

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-estimate-component',
  template: `
    <!-- Estimate输入框 -->
    <input type="number" [formControl]="estimateControl" placeholder="Estimate">
    
    <!-- 其他关联输入框示例 -->
    <input type="number" [(ngModel)]="otherInputValue" (ngModelChange)="autoUpdateEstimate()">
  `
})
export class EstimateComponent implements OnInit {
  // 定义Estimate的FormControl
  estimateControl = new FormControl(0);
  // 其他关联输入框的值
  otherInputValue = 0;

  ngOnInit() {
    // 监听Estimate值的所有变化
    this.estimateControl.valueChanges.subscribe((newValue) => {
      // 转成数字类型（输入框默认返回字符串）
      const numericValue = Number(newValue);
      // 执行你的自定义代码
      this.handleEstimateChange(numericValue);
    });
  }

  // 其他输入框变化时，自动更新Estimate的值
  autoUpdateEstimate() {
    // 这里写你的自动计算逻辑，比如基于otherInputValue计算
    const calculatedEstimate = this.otherInputValue * 1.5;
    // 更新Estimate的值，这会触发valueChanges订阅
    this.estimateControl.setValue(calculatedEstimate);
  }

  // 你的自定义处理逻辑
  handleEstimateChange(newValue: number) {
    console.log('Estimate值已更新:', newValue);
    // 在这里写你的业务代码，比如发送请求、更新其他数据等
  }
}

注意事项： #

• 记得在你的模块中导入ReactiveFormsModule，否则FormControl无法生效。

方案二：使用Setter监听（适合模板驱动表单） #

如果你习惯用模板驱动表单的ngModel，可以通过给Estimate的绑定变量设置getter和setter，来监听所有值的变化（包括手动输入和代码修改）。

代码示例： #

import { Component } from '@angular/core';

@Component({
  selector: 'app-estimate-component',
  template: `
    <input type="number" [(ngModel)]="estimate" placeholder="Estimate">
    <input type="number" [(ngModel)]="otherInputValue" (ngModelChange)="autoUpdateEstimate()">
  `
})
export class EstimateComponent {
  // 私有变量存储实际值
  private _estimate = 0;
  otherInputValue = 0;

  // getter供ngModel读取
  get estimate(): number {
    return this._estimate;
  }

  // setter监听值的变化
  set estimate(newValue: number) {
    // 转成数字类型
    const numericValue = Number(newValue);
    // 只在值真正变化时执行逻辑
    if (this._estimate !== numericValue) {
      this._estimate = numericValue;
      // 触发自定义代码
      this.handleEstimateChange(numericValue);
    }
  }

  autoUpdateEstimate() {
    // 自动更新Estimate，会调用setter触发逻辑
    this.estimate = this.otherInputValue * 2;
  }

  handleEstimateChange(newValue: number) {
    console.log('Estimate值变化:', newValue);
    // 你的业务逻辑
  }
}

方案三：结合@Input和ngOnChanges（如果值来自父组件） #

如果Estimate的初始值或自动更新的值来自父组件的@Input，可以结合ngOnChanges监听输入属性的变化，同时用内部变量处理手动输入：

代码示例： #

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-estimate-component',
  template: `
    <input type="number" [(ngModel)]="internalEstimate" (ngModelChange)="handleManualChange()">
  `
})
export class EstimateComponent implements OnChanges {
  // 父组件传递的Estimate值
  @Input() estimate: number = 0;
  // 内部变量处理手动输入
  internalEstimate = 0;

  ngOnChanges(changes: SimpleChanges) {
    // 监听父组件传递的estimate变化
    if (changes['estimate']) {
      const newValue = changes['estimate'].currentValue;
      this.internalEstimate = newValue;
      this.handleEstimateChange(newValue);
    }
  }

  // 处理手动输入的变化
  handleManualChange() {
    this.handleEstimateChange(this.internalEstimate);
    // 如果需要把手动修改后的值传回父组件，可以在这里emit事件
    // this.estimateChange.emit(this.internalEstimate);
  }

  handleEstimateChange(newValue: number) {
    console.log('Estimate值更新:', newValue);
    // 你的自定义逻辑
  }
}

这些方案都能完美覆盖你“自动更新+手动修改+监听变化”的需求，你可以根据自己的表单类型（响应式/模板驱动）和数据来源选择最合适的一种~

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