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

Question

我的 angular 应用程序卡住了一个问题，我使用输入作为数组并在点击事件出现时将一个值推送到数组。但是 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

Angular 更改检测仅检查对象标识，而不检查对象内容。因此不会检测到插入或移除。

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

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

或使用 IterableDiffer 检查 InputComponent 和 ngDoCheck 中的变化，就像 NgFor 所做的那样。

Answer 2

@GünterZöchbauer 的回答完全正确。但是，我想添加一个 alternative/supplement 来复制整个数组。使用问题中的相同示例。

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

改为

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

这里的 length 相当于组件的 *ngFor trackBy 函数。有了这个，ngOnChanges 就会随着内容长度的变化而发生。

如果与 *ngFor trackBy 方法结合使用，应该会有一些性能优势，因为不会重新计算整个数组的绑定模板（没有 screen/content 闪烁）。

Answer 3

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

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

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

Why angular 2 ngOnChanges not responding to input array push

angular2-template

ngonchanges

angular