Angular 4子项之间的分离变化检测

Question

我不明白为什么即使我使用 ChangeDetectionStrategy.OnPush 和 changeDetectorRef.detach() 函数 ngDoCheck 仍然被调用。 我的应用中有数千个组件，如果从 child2 引发事件（鼠标单击等），我想阻止 child1 的 changeDetection。

这是plunker

如你所见，我有一个父组件

@Component({
  selector: 'my-app',
  template: `     
    <app-child1 test="test"></app-child1>
    <app-child2 test="test"></app-child2> `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
  test = 'test';

constructor() { }

  ngDoCheck() {
    console.log("### ngDoCheck app component");
  }
}

和 2 个相同的孩子：

@Component({
  selector: 'app-child1',
  template: `<input type="text" [(ngModel)]="test" /><br/> `,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class Child1Component implements OnInit {
  @Input()
  test: string;

  constructor(public cd: ChangeDetectorRef) { }

  ngAfterViewInit() {
      console.log("###### DETACH child 1");
      this.cd.detach();

  }

  ngDoCheck() {
    console.log("### ngDoCheck child 1");
  }
}

如果我开始在 child1 的输入中输入，就会调用 child2 的 ngDoCheck 函数。

想想有成千上万的孩子，它变得非常缓慢......

谢谢！

Answer 1

这是预期的行为，请阅读Everything you need to know about change detection in Angular。这是报价：

5. 在子组件上调用 OnInit 和 ngDoCheck（仅在第一次检查时调用 OnInit）
6. 为子视图运行更改检测（重复此列表中的步骤）

如您所见，ngDoCheck 总是在子组件上触发。 OnPush 检查在尝试为子组件运行更改检测时在之后执行。这是报价：

最后，对当前视图的变化检测负责 启动子视图的更改检测（操作 8）。这是 检查子组件视图状态的地方，如果它是 ChecksEnabled，然后为此视图执行更改检测。 以下是相关代码：

viewState = view.state;
...
case ViewAction.CheckAndUpdate:
  if ((viewState & ViewState.ChecksEnabled) &&
    (viewState & (ViewState.Errored | ViewState.Destroyed)) === 0) {
    checkAndUpdateView(view);
  }
}

但是，它只会为使用OnPush 策略的顶级组件调用。它不会在子组件上调用：

     normal component
           |
  child OnPush component  <---- ngDoCheck called only for this component
           | 
    child component 1     <---- ngDoCheck is not called for this component
           |
    child component 2     <---- ngDoCheck is not called for this component

为什么会触发？

触发它是为了让您有机会在此挂钩中执行您自己的自定义逻辑，并选择运行一次更改检测周期，即使 @Inputs 没有更改：

class OnPushComponent {
   constructor(private cd: ChangeDetectorRef) {}

   ngDoCheck() {
      if (some check) {
          this.cd.markForCheck();
      }
   }
}

另请参阅Angular ngDoCheck() gets called even with ChangeDetectionStrategy.OnPush 这个答案以获取真实用例示例。