Angular子组件@Input值无法像双向绑定更新HTML，求解决方法

嘿，我来帮你捋清楚这个问题——你碰到的其实是Angular变更检测和引用类型的典型坑！

问题根源 #

你使用的Date是引用类型，在子组件的addMonth方法里调用this.i.setMonth()时，只是修改了这个Date对象内部的属性，但对象本身的引用地址并没有改变。Angular的变更检测机制会对比输入属性的引用是否变化，因为引用没变，所以：

• 子组件的模板不会更新（也就是你看到的{{i | date:'MMM-yyyy'}}没变化）
• ngOnChanges也不会触发（因为输入值的引用没发生改变，所以你看不到日志输出）

可行的解决方法 #

方法1：创建新的Date对象（推荐，符合Angular单向数据流设计）

每次修改月份时，生成一个新的Date实例，这样引用地址变了，Angular就能自动检测到变化。修改子组件的addMonth方法：

addMonth = (m: number) => {
  // 基于当前日期创建一个新的Date对象
  const newDate = new Date(this.i);
  newDate.setMonth(newDate.getMonth() + m);
  // 把新对象传给父组件
  this.monthChanged.emit(newDate);
}

这样父组件的selectedMonth会被赋值为新的Date引用，子组件的@Input() i也会更新，模板自然就刷新了。

方法2：手动触发变更检测（不推荐，仅临时方案）

如果你因为某些原因必须修改原Date对象，可以手动通知Angular进行变更检测。注意要正确注入ChangeDetectorRef：

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

export class ChildComponent implements OnInit {
  @Input() i: Date;
  @Output() monthChanged = new EventEmitter<Date>();

  constructor(private cdr: ChangeDetectorRef) { }

  ngOnInit(): void { }

  addMonth = (m: number) => {
    this.i.setMonth(this.i.getMonth() + m);
    this.monthChanged.emit(this.i);
    // 手动触发变更检测，强制更新模板
    this.cdr.detectChanges();
  }
}

不过还是更推荐方法1，因为它遵循了Angular单向数据流的原则，避免父子组件之间的状态混乱。

补充：为什么ngOnChanges没触发？

ngOnChanges只有当输入属性的引用发生变化（比如从一个对象换成另一个对象）或者基本类型的值变化（比如数字、字符串）时才会触发。你修改的是Date对象的内部属性，引用没变，所以这个钩子不会被调用，这就是你看不到日志的原因。

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