Angular 如何通过以下方式检测从 parent 到 child 的变化

Question

示例组件包含 object 数组的数据，并且其数组循环中包含 child 组件。 Sample.component

export class SampleComponent implements OnInit {
  data = [{ value: 3 }, { value: 1 }];
  constructor() {}

  ngOnInit(): void {}
  valueChange() {
    this.data[1].value = 5;
    this.data = [...this.data];
  }
  whenComponentRerendered() {
    console.log('Parent component rerendered');
  }
  consoleOutput() {
    console.log('Console from button click');
  }
}

<button (click)="valueChange()">
  Change input to 5
</button>
<ng-container *ngFor="let item of data">
  <app-samplechild [data]="item"></app-samplechild>
</ng-container>

现在我需要检测 object 上的任何值从 parent

更改时的变化

export class SamplechildComponent implements OnInit {
  @Input('data') data!: any;
  constructor() {}

  ngOnInit(): void {}
  whenComponentRerendered() {
    console.log('child component rerendered');
  }
  changeValue() {
    this.data.value = 5;
  }
}

<p>
  The value from parent is
  {{ data | json }}
</p>

我无法获得更改，因为数据不是输入值。如何获取 child 的变化？ StackBlitz 注意：这只是示例代码，在现实数据中有大量 object 的多层次数组。

Answer 1

从 SamplechildComponent 中删除 changeDetection: ChangeDetectionStrategy.OnPush。然后它工作正常。你应该使用默认的 angular changeDetection system.

Angular 如何通过以下方式检测从 parent 到 child 的变化

Angular how to detect changes from parent to child in the following way

javascript

typescript

angular

angular-changedetection

change-detector-ref