0

我在这里有一个 Plunkr 演示问题：https ://plnkr.co/edit/e5OVhuWtyStxI1vvXd9h

总结是：

我有一个父子组件。Child 已将更改检测策略设置为 onPush。

Child的模板就是这样的：

@Component({
  selector: 'child',
  template: `
  <button (click)="changeHello()">Change</button>
  {{hello}} 
`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {

  hello = "hi";

  ngOnChanges() {
    console.log("on changes called");
  }

  ngDoCheck() {
    console.log("do check called");
  }

  changeHello() {
    this.hello = "goodbye";
  }
}

为什么当我单击按钮时一切正常，而更改实际上反映在视图中？（即从hi变为goodbye）

我认为事件的顺序是：

  1. 用户点击按钮
  2. “hello”类属性现在指向“goodbye”字符串
  3. onTurnDone()zone 事件被调用，Angular 开始从根执行更改检测
  4. 在根上时，它注意到所有子输入都没有更改，并且因为它的更改检测策略设置为 onPush，所以它停在那里并且不在子进程中运行更改检测
  5. 模板中的{{hello}}未更新为goodbye，仍显示旧的hi

我的上述推理哪里出错了？为什么会ngDoCheck()被调用？

4

0 回答 0