Angular ngAfterContentChecked checkint不断更改

我有父组件：

...
<mdb-select
    [options]="optionsModel"
    (selected)="setSelectedOption($event, 'device_model')"
    placeholder="Choose model"
    >
</mdb-select>
...
<app-crashes-list
    [queryParams]="queryParams"
    >
</app-crashes-list>
...

...
@Input() private queryParams: {device_model?: string, officer_id?: string};
...
ngAfterContentChecked() {
  console.dir(this.queryParams);
}
...

此外，我还有儿童碰撞列表组件：

...
<mdb-select
    [options]="optionsModel"
    (selected)="setSelectedOption($event, 'device_model')"
    placeholder="Choose model"
    >
</mdb-select>
...
<app-crashes-list
    [queryParams]="queryParams"
    >
</app-crashes-list>
...

...
@Input() private queryParams: {device_model?: string, officer_id?: string};
...
ngAfterContentChecked() {
  console.dir(this.queryParams);
}
...

我的期望：每当我在选择组件中手动选择一个新选项时，控制台中就会出现一条新消息。

我的结果是：我在控制台中不停地看到一条新消息4-5次。

---

WIDW？

将console.dir移动到ngOnChanges生命周期挂钩内

ngOnChanges(changes: SimpleChanges) {
  if (changes[queryParams]) {
    console.log(changes[queryParams].currentValue)
  }
}

---

哦，这很有趣，但是当我使用ngOnChanges钩子时，我只会在应用程序加载时收到一条新消息。Omfg，这很有趣，但是当我使用ngOnChanges钩子和“this.queryParams=JSON.parse（JSON.stringify（this.queryParams））”时效果很好在setSelectedOption method/末尾的父组件中，这是ngOnChanges的预期行为。Angular不会对复杂对象进行脏检查，因此必须更改对传递到@Input绑定中的对象的引用，以便ngOnChanges钩子拾取该对象。因此，对queryParams进行变异是行不通的。对queryParams的每次更改都必须更改对象引用。