即使使用ChangeDetectionStrategy.OnPush,也会调用Angular ngDoCheck()

Question

假设我有一个像这样的组件结构:

AppComponent
    HeaderComponent
    ContentComponent
        TodosComponent
            TodoComponent

如果我设置HeaderComponent的changeDetection到ChangeDetectionStrategy.OnPush和改变TodoComponent,仍然HeaderComponent的东西ngDoCheck(),ngAfterViewChecked()和ngAfterContentChecked()被触发.

我错过了什么？无论如何都会触发ngDoCheck吗？如果是,如何确定ChangeDetection是否检查了组件？

Answer 1

是的,这是正确的行为.文章如果您认为ngDoCheck您的组件正在被检查 - 请阅读本文详细解释行为.这是简短的版本.

在ngDoCheck被触发正在检查的组件之前.这样做是为了允许您执行一些自定义逻辑,然后标记组件以进行检查.您知道Angular @Input通过对象引用跟踪,但您可以使用它ngDoCheck来进行自定义跟踪.这是一个简单的例子:

Component({
   ...,
   changeDetection: ChangeDetectionStrategy.OnPush
})
MyComponent {
   @Input() items;
   prevLength;
   constructor(cd: ChangeDetectorRef) {}

   ngOnInit() {
      this.prevLength = this.items.length;
   }

   ngDoCheck() {
      if (this.items.length !== this.prevLength) {
         this.cd.markForCheck();
      }
   }

请记住,ngDoCheck仅针对策略的顶级组件触发OnPush.它不会触发这个组件的孩子.

ngAfterViewChecked即使现在检查完成,也会为组件触发正确.这也是设计的.

我强烈建议您阅读Angular中有关变化检测的所有知识,特别是Exploring the implications部分.它显示了您正在寻找的操作顺序.

另请阅读 我们为什么需要ngDoCheck.