Question

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

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，似乎触发生命周期回调并不是唯一的问题，因为实际上已经进行了一些检查。

当输入未更改时，Angular 2 ChangeDetectionStrategy.OnPush触发ngAfterViewChecked

1 个答案: