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

Question

在 Angular 7 中创建自定义组件时，跟踪数组更改的最佳方法是什么？

示例:

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

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

另外，有没有更好的方法来做到这一点(例如可观察量等)？为什么？

Answer 1

我会使用ngOnChanges()来做到这一点这是 Angular 生命周期 Hook 之一。您可以在哪里找到以下信息:

1. 如果这是第一次更改。
2. 当前值是多少。
3. 之前的值是多少。

其类型为:SimpleChange

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

此外，Angular 更改检测仅检查对象身份，而不检查对象内容，因此不会检测到推送、弹出。因此，您可以做的是在分配此输入的子组件中，而推，使用 slice() 推不同的对象方法Array

子组件 HTML:

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

子组件 TS:

export class Child{

    arr: any = [];

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