javascript - Angular 2 ChangeDetectionStrategy.OnPush 在输入不改变时触发 ngAfterViewChecked

Question

我正在使用 OnPush 策略并根据此 article如果没有输入更改，则无需检查组件的模板。 但在我的示例中，当我单击触发按钮并且输入没有更改时，在这种情况下 ngAfterViewChecked Hook 仍在运行。我错过了什么？

import {Component, NgModule, Input, ChangeDetectionStrategy} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'cmp',
  template: `
    <h1>{{data.name}}</h1>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class Cmp {
  @Input() data;

  ngOnChanges() {
    console.log('ngOnChanges');
  }

  ngAfterViewChecked() {
    console.log('view checked');
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <cmp [data]="data"></cmp>
      <button (click)="trigger()">trigger</button>
      <button (click)="change()">Change</button>
    </div>
  `,
})
export class App {
  constructor() {
    this.data = {
      name: 'Angular'
    }
  }

  trigger() {

  }

  change() {
    this.data = {
      name: 'Angular2'
    };
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, Cmp ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 1

你没有错过任何东西。您对 ngAfterViewChecked 的期望是正确的，当父 changeDetectionStrategy 为 OnPush 时，子树组件不会调用它。

目前有一个issue opened on Github而且似乎触发生命周期回调并不是唯一的问题，因为实际上进行了一些检查。