如果在父组件和子组件中设置 ChangeDetectionStrategy OnPush 将不起作用答案

【问题标题】：ChangeDetectionStrategy OnPush doesn't work if set it in a parent and a child component如果在父组件和子组件中设置 ChangeDetectionStrategy OnPush 将不起作用
【发布时间】：2019-01-17 18:01:04
【问题描述】：

我有两个组件。

在这两个组件中我都设置了ChangeDetectionStrategy OnPush。

AComponent（子）

@Component({
  selector: 'app-a',
     ... ,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AComponent {

  private _value: string;

  @Input()
  set value(v: string) {
    console.log(`set value : ${v}`);
    this._value = v;
  }

  get value() {
    return this._value;
  }

}

和 AppComponent（父级）。

@Component({
    ... ,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {

  value: string = "0";

  toClick(event) {

    // set value before request to server
    // for example to set a progress spinner    
    this.value = "1";

    setTimeout(() => {
      console.log('connected to server');

      //set value after request to server
      this.value = "2";
    }, 500);
  }

}

Appcomponent 的模板（父级）

<app-a [value]="value" (click)="toClick()"></app-a>

如果我单击 Acomponent，则设置了 "1" 值，但未设置 "2"。（可以在控制台看到）

如果我将ChangeDetectionStrategy 更改为AppComponent（父级）的默认值，它工作正常。

有人能解释一下这种行为吗？

DEMO

【问题讨论】：

标签： angular typescript angular-components

【解决方案1】：

使用OnPush 策略，更改检测仅在模板上发生事件时才起作用，在您的情况下，toClick 和 @Input 参数已更改。在事件处理程序中，您有一个异步回调函数 (setTimeout)，它已经从事件处理程序中出来了。所以你需要从回调函数中手动运行变化检测。

您可以注入ChangeDetectorRef 并使用markForCheck 函数手动运行更改检测。

检查Stackblitz example。

【讨论】：