【Angular2】Information组件设计

引言

Information组件是页面中侧边栏，用于显示一些相关信息，包括用户信息，时间信息，同时加入网络状态静默监测

 

功能要求

1.显示用户信息；
2.显示时间；
3.显示网络状态；
4.提供交卷功能；

 

代码说明

html code

<div id="sidebar_info">
  <div class="sidebar_title">信息详情div>
  <img src="../../../assets/images/default-avatar.png">
    <div class="stu_info">学院：{{student?.institutionName}}div>
    <div class="stu_info">专业：{{student?.professionName}}div>
    <div class="stu_info">学号：{{student?.studentCode}}div>
    <div class="stu_info">姓名：{{student?.name}}div>

  <div class="reamin_time">{{hour}}:{{minute}}:{{second}}div>
  <button type="button" class="btn btn-info btn-lg" (click)="submit()">   交卷   button>

  <div id="networkstate" class="breathe-green-btn">div>
div>

html 说明

用户信息绑定到student实体中，时间信息绑定到hour、minute、second中；

id为networkstate的div是一个呼吸灯，用来显示网络状态；

---

ts code

  @Input() examTimeLength: string; //考试时长
  public student: StudentInformation; //用户信息
  public networkState: number = 0;//网络连接状态 0-正常；1-警告；3-危险
  private timer;//定时器
  private hour: number = 0;//小时差
  private minute: number = 0;//分钟差
  private second: number = 0;//秒数差
  private _diff: number = 0;//时间差

 /* 组件初始化时获取数据 */
  ngOnInit() {
    this.getStudentInformation();
  }

  /* 组件输入值变化时改变时间差 */
  ngOnChanges(changes: SimpleChanges) {
    if (changes['examTimeLength'] && this.examTimeLength) {
      this.diff = parseInt(this.examTimeLength) * 60;
      this.startTimer();
    }
  }

  /* 组件初始化后开始计时 */
  ngAfterViewInit() {
    this.startTimer();
  }

  /* 组件销毁时清除定时器 */
  ngOnDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }

  /* 得到学生个人信息方法 */
  public getStudentInformation() {
    let studentid: string = localStorage.getItem("userId");
    let url = `basicInfo-web/student/findStudentById/${studentid}` + this.authGuardService.getTicket();
    this.http.get(url).subscribe(
      res => {
        this.student = res.json().data;
        localStorage.setItem("NetWorkState", "0");
      }
    );
  }

  /* 判断是否可以交卷 */
  submit() {
    let undone: number = document.getElementsByClassName("card").length;
    let done: number = document.getElementsByClassName("card_done").length;
    if (undone > 0) {
      this.display = true;
      this.message = "您已经答题" + done + "道，还有" + undone + "道题目未答。\n 是否确认交卷"
    } else {
      this.submitToBackEnd();
    }
  }
  /* 交卷到后端 */
  submitToBackEnd() {
    let studentcode: string = localStorage.getItem("studentCode");
    let url = `examinationEvaluation-web/onlineExam/updateExamStateBySumit/${studentcode}` + this.authGuardService.getTicket();
    let body = "";
    this.http.post(url, body).subscribe(
      res => {
        if (res.json().code == "0000") {
          this.display = false;
          this.router.navigateByUrl('student-online-exam/hand-in-succeed');
        } else {
          alert("交卷出现异常，请联系管理员！");
        }
      }
    );
  }



  //时间差
  private get diff() {
    return this._diff;
  }
  private set diff(val) {
    this._diff = val;
    this.hour = Math.floor(this._diff / 3600);
    this.minute = Math.floor((this._diff % 3600) / 60);
    this.second = (this._diff % 3600) % 60;

  }

  /* 开始计时 */
  startTimer() {
    this.timer = setInterval(() => {
      this.diff = this.diff - 1;
      if (this.diff == -3) { clearInterval(this.timer); }
      //监测考试剩余时间
      if (this.hour == 0 && this.minute == 0 && this.second <= 0) {
        clearInterval(this.timer);
        this.submitToBackEnd();//直接交卷
      }
      //监测网络连接状态
      this.startMonitorNetworkStatus();
    }, 1000);
  }

  /* 监测网络状态 */
  startMonitorNetworkStatus() {
    this.networkState = parseInt(localStorage.getItem("NetWorkState"));
    let el: Element = document.getElementById("networkstate");
    if (this.networkState == 1) {
      el.setAttribute("class", "breathe-yellow-btn");
    } else if (this.networkState == 3) {
      el.setAttribute("class", "breathe-red-btn");
    } else if (this.networkState > 3) {
      this.display_error = true;
      this.message = "网络连接异常，请立刻联系管理员！";
      localStorage.setItem("NetWorkState", "3");
    }
  }

ts 说明

开始的4个以ng开始的方法是在组件的不同声明周期做出相应的处理；

组件初始化时获取数据，然后根据数据对页面进行渲染；

由于异步的缘故和子组件先与父组件出现，导致examTimeLength再渲染完页面后还没有值，所以在组件变化声明周期中重新操作；

在组件渲染完页面之后，再开始计时，防止一些莫名其妙的问题；

在组件销毁后要销毁timer，防止内存泄漏；

交卷功能的逻辑需要判断用户是否全部完成，如果没有则提示，用户选择提交则强制提交，同时倒计时结束也强制提交；

在倒计时功能中，每次倒计时调用监测网络状态方法，检查目前localStorage中NetWorkState的值是多少，0-正常；1-警告；3-危险，这个值增加方法是在每个题型组件中监测返回值来判断以及调用的service中的错误处理来判断；

参考博客：angular2 倒计时组件

 

小结

Information组件实现的就是信息展示和交卷功能，按理说交卷功能应该在ExamPaper组件中实现，但是原型图设计在这个区域，所以就放在这个组件中了

同时，网络监测的途径是两个，1是实时提交的返回值，2是service的错误处理；目前设计仅是监测，如果功能需要强化，还可以把出现问题的题目和答案再做处理，延迟再发或者保留本地