如何更新子组件中的更改

问题描述

子组件的@input值不会像html绑定那样在two-way中更新其值。这是我的代码。

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);
  }

}

我尝试了什么？

this.changeDetectorRef.detectChanges();

ngOnChanges(changes: SimpleChanges) {
    console.error(this.i); // no error log...
    this.i = changes.i.currentValue;
    console.error(this.i); // no error log...
  }

但是没有任何作用。我还应该使用什么？

解决方法

我创建了一个重载您的问题的堆叠闪电战。您可以检查它here

您可以检查控制台日志。当您在子组件中使用this.i.setMonth(this.i.getMonth() + m)更新时，它也会同时更新parent selectedMonth。因为它们是同一个对象。由于对象引用不会更改，因此Angular将不会运行更改检测。您可以按照以下步骤在monthChanged中创建新对象来解决此问题

更改

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

到

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

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

示例

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

如果您要更新myData.test= "YourData",，它将不会被触发。你需要做些事情

this.myData = changedData;

一种解决方法可以使用DoCheck生命周期挂钩，并尝试手动检查属性更改。但是通常更改参考文献更为方便。

在这里检查您的价值

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

  ngOnChanges() {
    this.data=changedData 
  }

angular angular2-changedetection