如何更新子组件的变化

Question

子组件的 @input 值未像 two-way 绑定通常那样更新其在 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);
  }

}

我尝试了什么？

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...
  }

但是 none 工作。我还应该使用什么？

Answer 1

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

例子

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

Answer 2

我创建了一个 stackblitz 来重现您的问题。你可以看看here

您可以查看控制台日志。当您使用 this.i.setMonth(this.i.getMonth() + m) 在子组件中更新时，它也会更新 parents selectedMonth。因为它们是同一个对象。因为，对象引用不会改变，Angular 不会运行改变检测。您可以通过在 monthChanged 中创建新对象来解决此问题，如下所示

改变

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

到

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

如何更新子组件的变化

How to update changes in child component

angular2-changedetection

angular