Angular 如何更新子组件中的更改

子组件的

@input

值在

html

中不更新其值，正如

双向

绑定通常所做的那样。这是我的密码

parent.component.html

<app-child [i]="selectedMonth" (monthChanged)="monthChanged($event)"></app-child>

monthChanged(d: Date) {
    this.selectedMonth = d; // this is working as expected.
    console.error(this.selectedMonth); // working...
  }

child.component.html

<div>
    <span (click)="addMonth(-1)">Prev </span>
    <span>{{i | date:'MMM-yyyy'}}</span> // this value not being changed.
    <span (click)="addMonth(1)">Next </span>
</div>

child.component.ts

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

  constructor() { }

  ngOnInit(): void {
  }

  addMonth = (m: number) => {
    this.i.setMonth(this.i.getMonth() + m);
    this.monthChanged.emit(this.i);
  }

}

---

但都不管用。我还应该使用什么？

当更新整个参考时，数据将被更新。如果只更新该对象内的某些属性，则不会触发该对象。您需要更改所传递对象的引用

范例

<child [data]="myData"></child>

解决方法是使用DoCheck lifecycle钩子并尝试手动检查属性更改。但一般来说，更改引用更方便

在这里检查您的值

 // on every change of @input 'name', this method will be triggered

  ngOnChanges() {
    this.data=changedData 
  }

---

我创建了一个stackblitz复制你的问题。你可以查一下

您可以检查控制台日志。当您使用

this.i.setMonth（this.i.getMonth（）+m）在子组件内更新时

它也会更新

parent

s

选择每月

。因为它们是同一个物体。由于对象引用不会更改，因此Angular不会运行更改检测。您可以通过在

monthChanged

内创建新对象来解决此问题，如下所示

改变

monthChanged(d: Date) {
  this.selectedMonth = d; 
  ...
}

到

 // on every change of @input 'name', this method will be triggered

  ngOnChanges() {
    this.data=changedData 
  }

monthChanged(d: Date) {
  this.selectedMonth = d; 
  ...
}

monthChanged(d: Date) {
  this.selectedMonth = new Date(d); 
  ...
}