Angular 如何通过以下方式检测从父母到孩子的变化

Question

Sample Component has data which array of object and it has child component on their array loop. 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>

now I need to detect changes when any value on object is changed from 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>

I couldn't get the changes since the data is not an Input value. How to get changes in child? StackBlitz Note: This is only sample code, in realistic data has huge number arrays of object with multiple hierarchy.

Answer 1

Remove changeDetection: ChangeDetectionStrategy.OnPush from SamplechildComponent . Then it works fine. You should use default angular changeDetection system.