一.什么是ChangeDetection

  • 用于检测程序内部状态,然后反映到UI上

  • 引起状态变化的内容【通常都是异步的】:Events事件触发、XHR发送的Http等请求通过接收内容改变某些状态、Timers定时任务

  • 事件执行通常是通过ApplicationRef监听NgZone的onTurnDone,然后执行检测

  • 程序状态通常会构建CD树(ChangeDetection树),Angular默认策略是将所有的CD树都跑一边,有的属性只会通过外部因素改变而改变的通常会执行onPush策略(只跑基本的节点)

ChangeDetection状态检测策略

二.Default策略调整为OnPush策略实例代码

  • 在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();
    

相关文章:

  • 2021-04-25
  • 2021-07-10
  • 2021-07-20
  • 2021-08-28
  • 2021-06-08
  • 2021-10-14
猜你喜欢
  • 2021-12-26
  • 2021-12-06
  • 2021-09-04
  • 2022-12-23
  • 2022-12-23
  • 2021-10-15
相关资源
相似解决方案