为什么angular 2 ngOnChanges没有响应输入数组推送

Question

我的角度应用程序遇到了问题,我使用input作为数组,并在click事件出现时将值推送到数组.但是当数组推送完成时,ngOnChanges不会触发.有没有办法解雇ngOnChange

我的代码是ts文件

@Component({
  selector: 'adv-search',
  templateUrl: './app/modules/result.html'
})

export class InputComponent {
  @Input() metas:any=[];

  ngOnChanges() {
    console.log(this.metas);
  }
}

我的选择标签

<adv-search [metas] = "metaIds"></adv-search>

单击事件代码

insertIds(id:any) {
   metaIds.push(id);
}

Answer 1

角度变化检测仅检查对象标识,而不检查对象内容.因此未检测到插入或删除.

您可以做的是在每次更新后复制数组

insertIds(id:any) {
  this.metaIds.push(id);
  this.metaIds = this.metaIds.slice();
}

或使用IterableDiffer来检查里面的变化InputComponent在ngDoCheck像NgFor做.

Answer 2

如果您重新分配metaIds数组，则将触发ngOnChanges生命周期事件。您可以将数组解构为新数组。

insertIds(id:any){
    this.metaIds = [...this.metaIds, id];
}

Answer 3

@GünterZöchbauer的回答是完全正确的.但是,我想添加一个替代/补充来复制整个数组.使用问题中的相同示例.

<adv-search [metas] = "metaIds"></adv-search>

改为

<adv-search [metas] = "{trackBy: metaIds.length, metaIds: metaIds}"></adv-search>

这里的长度等于组件的*ngFor trackBy函数.这样,ngOnChanges会随着内容长度的变化而发生.

如果与*ngFor trackBy方法结合使用,则应该有一些性能优势,因为不会重新计算整个数组的绑定模板(没有屏幕/内容闪烁).