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

Question

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

例子：

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

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

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

Answer 1

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

1. 如果是第一次改变。
2. 当前值是多少。
3. 以前的值是多少。

它的类型：SimpleChange

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

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

子组件 HTML：

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

子组件 TS：

export class Child{

    arr: any = [];

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