ngOnChanges仅在上次迭代时触发

Question

我的结构如下：

Data-Handling Component
  |
  |-- Grid Component
  |-- Chart Component

也就是说，Data-Handling组件是两个同级组件的父级：Grid和Chart。

我有一个数字数组，通过@Input() / @Output属性在这三个组件之间共享。

在Grid组件中，当我更新数组的单个值时，@Output()属性将信息发送给父Data-Handling组件，而父Data-Handling组件则通过其@Input()属性之一将信息发送给Chart组件。

因此(我重写并跳过了一些代码，因此可能会出现一些语法错误)：

grid.component.html:

[Not Relevant?] 

grid.component.ts:

@Input() gridValues: any[] = []  // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

@Output() valueChanged: EventEmitter<any> = new EventEmitter<any>()

updateAllValuesToThree(): void {
    for (var i = 0; i < this.gridValues.length; i++) {
        this.updateValue(i, 3)
    }
}

updateValue(index: number, value: number): void {
    let updatedValue: any = {}

    updatedValue.index = index
    updatedValue.value = value

    this.gridValues[index] = value

    this.valueChanged.emit(updatedValue)
}

dataHandling.component.html:

<grid (valueChanged)="onValueUpdate($event)"
      [gridValues]="dataArray">
</grid>

<chart [chartData]="dataArray"
       [individualValueChanged]="individualValueChanged">
</chart>

dataHandling.component.ts:

dataArray: number[] = []  // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
individualValueChanged: any = {}

onValueUpdate(event: any): void {
    this.dataArray[event.currentValue.index] = event.currentValue.value

    this.individualValueChanged = event.currentValue
}

chart.component.ts:

@Input chartData: number[] = [] // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
@Input individualValueChanged: any = {}

ngOnChanges(changes: SimpleChanges): void {
    if (changes.individualValueChanged && changes.individualValueChanged.currentValue) {
        let changeInfo: any = changes.individualValueChanged.currentValue

        this.chartData[changeInfo.index] = changeInfo.value
    }
}

chart.component.html:

[Not Relevant?]

井。如果我将单个值从Grid更新到Chart，则一切正常。

但是，当我为chart数组的每个元素调用for循环中的EventEmitter时，只会在组件的数组中修改数组的最后一个元素。

所以：

• 在Grid组件中，我将拥有：[3, 3, 3, 3, 3, 3, 3, 3, 3, 3]
• 在Data-Handling组件中，我将拥有：[3, 3, 3, 3, 3, 3, 3, 3, 3, 3]
• 在Chart组件中，我将拥有：[1, 2, 3, 4, 5, 6, 7, 8, 9, 3]

每个事件都从Data-Handling中正确地触发到Grid组件中，但只有最后一个更新事件进入Chart组件，从而触发ngOnChanges()。

这是否如预期的那样？我是不是遗漏了什么？

Answer 1

这是预期的行为。@Input更新是在更改检测期间完成的。@Output是在更改检测之外处理的。

在这里触发事件时：

for (var i = 0; i < this.gridValues.length; i++) {
    this.updateValue(i, 3)
}

在数据处理组件中触发以下方法：

onValueUpdate(event: any): void {
    this.dataArray[event.currentValue.index] = event.currentValue.value

    this.individualValueChanged = event.currentValue
}

因此，此方法被触发的次数与触发this.updateValue(i, 3)的次数相同。event.currentValue的最后一个值将为this.individualValueChanged设置。

只有在处理完所有事件后，角才会经过更改检测阶段，并更新包含最后一个值的输入individualValueChanged绑定。

有关更改检测的详细信息，请阅读你需要知道的关于角度变化检测的所有信息。还读了角度应用的两个阶段