跟踪组件内数组变化的最佳方式是什么？

Question

在Angular7中创建自定义组件时，跟踪数组变化的最佳方式是什么？

示例：

export class Test {
   @Input() myArray = []

 // tell if array was modified (push, pop, reassigned...)
}

另外，有没有更好的方法来做到这一点（比如可观察对象等）？为什么？

Answer 1

我会使用 ngOnChanges() 来完成它，它是 Angular 生命周期钩子之一。您可以在哪里找到以下信息：

如果是第一次改
当前值是多少。
之前的值是多少。

类型为：SimpleChange

ngOnChanges(changes: SimpleChanges){
 // Detect Changes
  let myArrayChange = changes['myArray'];
  let currentValue = myArrayChange.currentValue;
  let previousValue = myArrayChange.previousValue;
}

此外，Angular变化检测只检查对象标识，不检查对象内容，因此不会检测到 push、pop。 所以你可以做的是在 Child您分配此输入的组件，在推送时，使用 Array

的 slice() 方法推送不同的对象

子组件 HTML:

<test myArray="arr"></test>

子组件 TS:

export class Child{

    arr: any = [];

    someMethod(){
        this.arr.push('new element');
        this.arr = this.arr.slice();
    }
}

跟踪组件内数组变化的最佳方式是什么？

Which is the best way to track changes in an array inside a component?

javascript

arrays

typescript

angular

angular-changedetection