angular2 ChangeDetectorRef (变化检测器的引用)手动控制组件的变化检测行为

Angular检测机制

　　监测到异步事件后是怎么判断是否需要更新视图呢？其实比较简单，Angular通过脏检查来判断是否需要更新视图。脏检查其实就是存储所有变量的值，每当可能有变量发生变化需要检查时，就将所有变量的旧值跟新值进行比较，不相等就说明检测到变化，需要更新对应视图。当然，实际情况肯定不是这么简单，Angular会通过自己的算法来对数据进行检查，对算法感兴趣的可以参考这篇文章-Angular的脏检查算法。
　　Angular 应用是一个响应系统，首次检测时会检查所有的组件，其他的变化检测则总是从根组件到子组件这样一个从上到下的顺序开始执行，它是一棵线性的有向树，任何数据都是从顶部往底部流动，即单向数据流。

如何手动执行变更检测

从@angular/core引入AfterViewInit, ChangeDetectorRef。注入ChangeDetectorRef对象

constructor(private todoService:TodoService, private cdr: ChangeDetectorRef){}

它提供了以下方法供我们调用：

class ChangeDetectorRef {
  markForCheck(): void
  detach(): void
  detectChanges(): void
  checkNoChanges(): void
  reattach(): void
}

• markForCheck() - 在组件的 metadata 中如果设置了 changeDetection: ChangeDetectionStrategy.OnPush 条件，那么变化检测不会再次执行，除非手动调用该方法。
  • 　　

    @Component({
      selector: 'app-refer',
      templateUrl: './refer.component.html',
      styleUrls: ['./refer.component.css'],
      changeDetection: ChangeDetectionStrategy.OnPush
    })

• detach() - 从变化检测树中分离变化检测器，该组件的变化检测器将不再执行变化检测，除非手动调用 reattach() 方法。
• reattach() - 重新添加已分离的变化检测器，使得该组件及其子组件都能执行变化检测
• detectChanges() - 从该组件到各个子组件执行一次变化检测

　　手动设置变更检测：

ref.detach();
setInterval(() => {
 this.ref.detectChanges();
}, 5000);

详情链接：https://www.jianshu.com/p/6bef681a0cae