时间戳

首页 > 解决方案 > Angular NgOnChanges 行为怪异

angular - Angular NgOnChanges 行为怪异

问题描述

我有一个父组件通过输入向子组件发送数据。NgOnChanges 不会像我预期的那样工作。我知道它不适用于对象/数组，因为它们是通过引用发送的，因此 Angular 无法检测到更改。

因此，我尝试了使用 Object.assign() 将其分配给新对象以创建新引用的解决方法，但它不起作用。

家长 TS：

public selectSchedule(index) {
this.oldWeeklyScheduleSelected = this.weeklyScheduleSelected;
if (index != this.weeklyScheduleSelected) {
  this.weeklyScheduleSelected = index;
  this.selectedActivity = undefined;
}
this.http.getDefaultWeekPlanning(this.idOrganisation, this.userId, this.weeklyScheduleCreated[index]
).subscribe((data: any) => {
  if (data === undefined || data.length === 0) {
    this.sendScheduleToChild.scheduleSlot = [];
  } else {
    this.sendScheduleToChild.scheduleSlot = data;
    this.sendScheduleToChild.existingSchedule = true;
    this.sendScheduleToChild = Object.assign({}, this.sendScheduleToChild);
    console.log(this.sendScheduleToChild.scheduleSlot);
  }
}
}

儿童 TS：

@Input() sendScheduleToChild: any;

ngOnChanges(changes: SimpleChanges) {
console.log(changes)
if (this.oldWeeklyScheduleSelected != this.weeklyScheduleSelected && this.oldWeeklyScheduleSelected != undefined) {
  this.daysOfWeek.forEach(e => {
    e.scheduleSlot = [];
  });
  this.scheduleOfEachDay();
} else {
  this.scheduleOfEachDay();
}

if (this.sendScheduleToChild.existingSchedule === true && this.sendScheduleToChild.scheduleSlot.length === 0) {
  this.hoursOfDayDisplay(this.editAgenda);
}
}

oldWeeklyScheduleSelected 和 weekScheduleSelected 效果很好，因为它们是数字。

sendScheduleToChild 在第一次点击时不会。但它会在之后的第二个，但我的数据会在那个时候搞砸。

console.log(changes) 显示已更改的变量，但在 sendScheduleToChild 的情况下，先前值和当前值都相同，而其他两个则不同。

我不明白为什么它一开始没有检测到更改，但由于发送的数据属于同一类型，所以单击 2 次后会检测到更改。

任何帮助表示赞赏。

PS：

我试图通过更改值来修改对象的引用：

if (data === undefined || data.length === 0) {
    this.sendScheduleToChild.scheduleSlot = [];
  } else {
    this.sendScheduleToChild = {
      scheduleSlot: data,
      existingSchedule: true
    };

但它的行为仍然出乎意料。

标签： angularngonchanges

解决方案

您可以尝试围绕输入元素上的变量创建一个设置器。在你的子元素中，做

private _schedule: any;

@Input('sendScheduleToChild')
set sendScheduleToChild(schedule: any) {
   this._schedule = schedule;
}

在您的父组件视图中，只需执行

<childComponent [sendScheduleToChild]="{value}"></childComponent>

ngOnChanges 应该能够在此之后捕获更改。

推荐阅读