Angular中ChangeDetection检测程序内部状态

一.ChangeDetection简介

1.什么是ChangeDetection

• 用于检测程序内部状态，然后反映到UI上
• 引起状态变化的内容【通常都是异步的】：Events事件触发、XHR发送的Http等请求通过接收内容改变某些状态、Timers定时任务
• 事件执行通常是通过ApplicationRef监听NgZone的onTurnDone，然后执行检测
• 程序状态通常会构建CD树(ChangeDetection树)，Angular默认策略是将所有的CD树都跑一边，有的属性只会通过外部因素改变而改变的通常会执行onPush策略（只跑基本的节点）

2.实例代码

• 在Component组件中，如果没有定义@Component中的changeDetection，则默认为ChangeDetectionStrategy.Default策略

  @Component({
      selector:'app-test',
      ...,
      changeDetection: ChangeDetectionStrategy.Default
  })
  

• 可以人为将CD策略变成onPush策略，表示告诉angular不用来检查我，除非我外部发生变化

  @Component({
      selector:'app-test',
      ...,
      changeDetection: ChangeDetectionStrategy.OnPush
  })
  

  • 如果只修改了检查策略时，初识状态组件不会进行检查，当触发任何程序状态改变的内容时将会检查组件，其原因在于触发了全局检查，自然就会查到此组件
  • 如果只想在指定位置进行检查时（属性发生改变会影响UI的位置），可以通过注入ChangeDetectorRef，并在需要时调用markForCheck()方法即可

  constructor(public changeDetectorRef:ChangeDetectorRef){}
  //调用时使用
  this.changeDetectorRef.markForCheck();