Angular ngModel钩子：如何拦截父子组件间ngModel的值传递与变更？

当然有办法啦！针对你这种需要在ngModel双向绑定的前后都做值修改的场景，有两种非常实用的方案，刚好适配ngx Timepicker这类第三方组件的使用：

这是最简洁的方式，通过给你的实例变量套一层getter和setter，就能分别拦截传给子组件前的值和子组件传回父组件后的值。

举个具体的例子，假设你原本要绑定的变量是selectedTime，现在改成这样：

// 私有变量存原始值
private _selectedTime: Date;

// 传给子组件前，在这里修改值
get selectedTime(): Date {
  if (!this._selectedTime) return null;
  // 示例：把时间往前调1小时再传给子组件
  const adjustedTime = new Date(this._selectedTime);
  adjustedTime.setHours(adjustedTime.getHours() - 1);
  return adjustedTime;
}

// 子组件修改后的值传回时，在这里处理
set selectedTime(value: Date) {
  if (!value) {
    this._selectedTime = null;
    return;
  }
  // 示例：把时间往后调1小时再存到父组件
  const adjustedTime = new Date(value);
  adjustedTime.setHours(adjustedTime.getHours() + 1);
  this._selectedTime = adjustedTime;
}

然后模板里还是像平时一样用双向绑定就行：

<timepicker [(ngModel)]="selectedTime"></timepicker>

每次子组件要读取值时，会自动调用getter拿到修改后的值；每次子组件更新值时，会触发setter处理后再存到私有变量里，完全透明，不用改组件的绑定写法。

[(ngModel)]本质是[ngModel]（单向传值给子组件）和(ngModelChange)（监听子组件的值变化）的语法糖，拆分后可以更灵活地控制前后的逻辑。

模板里这么写：

<timepicker 
  [ngModel]="getAdjustedTimeForChild()" 
  (ngModelChange)="handleTimeChangeFromChild($event)"
></timepicker>

然后组件类里实现对应的方法：

selectedTime: Date;

// 生成传给子组件的修改后的值
getAdjustedTimeForChild(): Date {
  if (!this.selectedTime) return null;
  const adjusted = new Date(this.selectedTime);
  adjusted.setHours(adjusted.getHours() - 1);
  return adjusted;
}

// 处理子组件传回来的值，修改后更新父变量
handleTimeChangeFromChild(newTime: Date) {
  if (!newTime) {
    this.selectedTime = null;
    return;
  }
  const adjusted = new Date(newTime);
  adjusted.setHours(adjusted.getHours() + 1);
  this.selectedTime = adjusted;
}

这种方式适合逻辑比较复杂的场景，比如需要根据其他状态来动态调整修改规则的时候。

注意事项 #

处理Date类型的时候一定要注意：必须创建新的Date实例，不能直接修改原对象。因为Date是引用类型，直接修改会导致父组件和子组件的变量指向同一个对象，产生意外的同步修改问题。

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