javascript - 为什么在ngOnDetect能够执行此操作时ngOnChange不能检测到@Input元素更改

考虑这个plunker

注意:要观察效果，​​您必须在输入链接后重新运行应用程序

import {Component, OnInit, Input, OnChanges, DoCheck} from 'angular2/core'

@Component({
  selector: 'sub',
  template: `
    <li  *ngFor="#elem of sub_list">
      <div>{{elem['name']}}</div>
    </li>
    `
})
export class Sub {

  @Input()
  sub_list: Object[];

  ngOnInit(){
    console.log('init');
    console.log(this.sub_list);
  }

  ngOnChanges(){
    console.log('change');
    console.log(this.sub_list);
  }

  ngDoCheck() {
    console.log('check');
    console.log(this.sub_list);
  }

}
@Component({
  selector: 'my-app',
  template: `
    <div>
      <sub
        [sub_list]="my_list"
      >
      </sub>

    </div>

    `,
  directives: [Sub]
})
export class App {

  my_list: Object[] = [];

  ngOnInit() {
      var vm = this;

    setTimeout(function() {
          for(var i = 0; i < 100; i++) {

        vm.my_list.push({
          'index' : i,
          'name'  : i
        });
      }
    }, 100);

  }
}

如果我尝试在this.sub_list的Sub中打印出ngOnChange，则浏览器将输出一个空列表。

但是，我们可以看到ngDoCheck仍然可以正确捕获更改。

是否有特定原因？

最佳答案

在您的情况下，不会调用ngOnChanges来更新数组。实际上，Angular2根据引用检测更新。我的意思是，如果整个数组的引用不变(使用push方法在其中添加元素时就是这种情况)，则不会调用ngOnChanges方法。

在您的情况下，调用ngOnChanges时，数组为null，因为在设置输入元素之前调用了它。

在这种情况下，有两种方法可以检测到更改:

使用诸如slice(在推送之后)或concat之类的方法更新整个数组引用。

this.myArray.push({...});
this.myArray.push = this.myArray.push.slice();

利用ngDoCheck方法和IterableDiffers类来手动检查更新。该类允许您注册在数组中添加(或删除)元素时得到通知的回调。

有关更多详细信息，请参见以下链接:

Angular2 change detection: ngOnChanges not firing for nested object

https://angular.io/docs/ts/latest/api/core/DoCheck-interface.html