37

我的角度应用程序遇到了一个问题，我使用输入作为数组，并在点击事件发生时将一个值推送到数组。但是当数组推送完成时 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);
}
4

3 回答 3

79

角度变化检测仅检查对象身份，而不检查对象内容。因此不会检测到插入或移除。

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

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

或用于IterableDiffer检查内部InputComponent的ngDoCheck变化NgFor。

于 2017-04-05T06:43:43.797 回答
11

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

insertIds(id:any){
    this.metaIds = [...this.metaIds, id];
}
于 2017-07-12T19:59:04.807 回答
10

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

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

改为

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

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

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

于 2017-05-31T20:56:52.347 回答