如何使用ChangeDetectionStrategy在父子组件之间进行数据更新

Question

我查看了与ChangeDetectionStrategy相关的几个主题，但对它的不同用法感到困惑。 我只想在父组件上更改数据时更新子组件中的数据。 为此，我看到changeDetection: ChangeDetectionStrategy.OnPush已添加到父级的Component字段，但我不确定是否应该使用ChangeDetectorRef参数或某些默认方法，例如ngDoCheck()方法。 那么，如何在父组件和子组件之间执行此操作？ 我应该明确添加来自父级的参数，还是自动更新@Input变量？

import { Component,
         Input,
         ChangeDetectionStrategy,
         ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
  @Input() data: string[];

  constructor(private cd: ChangeDetectorRef) {}

  refresh() {
    this.cd.detectChanges();
  }
}

Answer 1

ChangeDetectionStrategy.OnPush的不同之处在于，您的组件只会在发生以下情况时检测更改：

1. 输入参考更改
2. 源自组件或其子组件之一的事件
3. 在视图中使用异步管道
4. 显式运行变更检测

因此，如果您不更改输入的引用，则必须手动检测更改。 这是显示OnPush和Default之间差异的stackblitz

Answer 2

使用ChangeDetectionStrategy.OnPush你的子组件只会在@Input 中的数据真正更新时才执行更新，所以你需要你的数据是不可变的，更新数据后 Angular 将执行 ChangeDetector 并更新组件视图。

您可以查看此示例： https : //angular-cd-immutable-example.stackblitz.io

Answer 3

一种方法是使用切片方法创建对数组的新引用。

可以在此处查看完整的 stackblitz 示例。

应用程序组件.html

<button 
     (click)="people.push({firstName: '1', lastName: '1'}); people = people.slice()">
   +</button>
<div>
  <p> {{ people | json }} </p>
</div>
<br/>
<person [persons]="people"></person>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
   people: any[] = [ 
     {
      firstName: "Alex1",
      lastName: "Brown1",
      age: 55,
     },
     {
      firstName: "Foo2",
      lastName: "Bar2",
      age: 44,
     },
    {
      firstName: "Fido3",
      lastName: "Johnson3",
      age: 14,
     }

   ]
}

和person.component.html

<div *ngFor="let person of persons">
  Hello I am {{person.firstName}} and I am {{ person.age}}
</div>

和 person.component.ts

import { Component, OnInit, Input, ChangeDetectionStrategy, 
    ChangeDetectorRef  } from '@angular/core';

class test {}
@Component({
  selector: 'person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PersonComponent implements OnInit {
  @Input() persons: any;
  
}