Angular2组件定时器-实时监控

项目需求介绍

	此需求我在实现上篇博客中饼状图的基础上的实时刷新功能，由于此系统需要学生访问从而实时监测学生是否同时登录成功并在线考试。那我们就一起来看。

解决方法

	angular提供了数据绑定的功能，所谓数据绑定就是讲组件类的数据和页面的DOM元素关联起来。当数据发生变化时，Angular能够监测到这些变化，并对其所绑定的DOM元素进行相应的更新。
	主要使用到的变化监测类ChangeDetectorRef和ChangeDetectionStrategy。其作用是开发者监测对此组件做个标记，该组件的变化，从而实现实时监测的目的。

ts文件

import { Component,OnInit,ChangeDetectionStrategy,ChangeDetectorRef,OnDestroy} from  "@angular/core";
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnlineSuperviseComponent implements OnInit {
  private timer;//定时器
  constructor(private el: ElementRef, private http: InterceptorService, private ref: ChangeDetectorRef) {
    this.timer = setInterval(() => {//设置定时刷新事件，每隔5秒刷新
      this.getEchart();
    }, 5000)
  }
  //销毁组件时清除定时器
  ngOnDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }}

总结

	Angular的监测变化实现机制大大方便了我们在做数据更新时的各种数据问题，足见工程师们的智慧。