【Angular2】OnlineExam组件设计

引言

在【Angular2】试卷整体设计中说到OnlineExam组件是作为Information、ExamPaper、AnswerSheet组件的容器，同时也起到了控制页面布局的作用

 

功能要求

1.页面操作：用户可以动态操作侧边栏的显示与隐藏；
2.传递数据：在组件交互中作为容器传递数据；

 

代码说明

html code

<div id="sidebar_left" [ngClass]="{'col-md-2': lbFlag, 'sidebar_hide':!lbFlag}">
    <div class="student_information_container">
        <student-information [examTimeLength]="examinationTimeLength">student-information>
    div>
div>


<div id="middle_page" [ngClass]="{'col-md-8': rbFlag&&lbFlag, 'col-md-10':(!lbFlag&&rbFlag)||(lbFlag&&!rbFlag),'col-md-12':!lbFlag&&!rbFlag}">
    <div class="topbar">
        <span id="topbar_info" class="glyphicon glyphicon-user" aria-hidden="true" (click)="changeLeftBarClass()">span>
        <span id="topbar_cards" class="glyphicon glyphicon-check" aria-hidden="true" (click)="changeRightBarClass()">span>
    div>
    <div class="exampaper_container">
        <exam-paper [exampaper]="exampaper" (updateAnswer)="changeAnswerSheet($event)">exam-paper>
    div>
div>


<div id="sidebar_right" [ngClass]="{'col-md-2': rbFlag, 'sidebar_hide':!rbFlag}">
    <div class="answer_sheet_container">
        <answer-sheet [exampaper]="exampaper" [updatedAnswer]="updatedAnswer">answer-sheet>
    div>
div>

html说明

采用bootstrap布局，使用3个div对页面进行分割，分别为2-8-2，对应Information组件，ExamPaper组件，AnswerSheet组件；

通过ngClass控制每个div的显示与隐藏，左侧栏和右侧栏有2个class切换，分别为col-md-2和sidebar_hide，中间部分有3个class用于切换，分别为col-md-8，col-md-10，col-md-12；

页面效果的切换通过ngClass和ts中“changeLeftBarClass()”与“changeRightBarClass()”控制rbFlag和lbFlag来实现；

<student-information [examTimeLength]="examinationTimeLength">student-information>

OnlineExam组件获取数据后会把examinationTimeLength值传递给Information组件；

<exam-paper [exampaper]="exampaper" (updateAnswer)="changeAnswerSheet($event)">exam-paper>

OnlineExam组件获取数据后会把exampaper数据传递给ExamPaper组件，同时接受ExamPaper组件传回来的答案数据；

<answer-sheet [exampaper]="exampaper" [updatedAnswer]="updatedAnswer">answer-sheet>

OnlineExam组件获取数据后会把exampaper数据和答案数据传递给AnswerSheet组件，同时在AnswerSheet组件中会监测答案数据的变化；

---

ts code

private exampaper:ExamPaperModel;
private exampaperBackup:ExamPaperModel;
private studentid: string; 
private updatedAnswer:Answer;
private examinationTimeLength:number;//考试时长

ngOnInit() {
    this.studentid = localStorage.getItem("userId");
    let url = `examinationEvaluation-web/onlineExam/findPaperByStudentIdForOnLineExam/${this.studentid}/192.168.21.110`+ this.authGuardService.getTicket();
    this.http.get(url).subscribe(
      res => {
        if (res.json().code == "0000") {
          this.exampaper = res.json().data;
          this.examinationTimeLength = this.exampaper.examinationTimeLength;
        } else if (res.json().code == "0001") {
          this.display = true;
          this.exampaperBackup = res.json().data;
        } else if (res.json().code == "0002") {
          alert("您已经交卷！！！");
        } else {
          this.display2 = true;
        }
      }
    )
  }

  /* 改变答题卡 */
  changeAnswerSheet(updatedAnswer:Answer){
    this.updatedAnswer=updatedAnswer;
  }

  /* 控制页面样式 */
  rbFlag = true;//左侧栏显示隐藏Flag
  lbFlag = true;//右侧栏显示隐藏Flag
  changeLeftBarClass(): void {
    this.lbFlag = !this.lbFlag;
  }
  changeRightBarClass(): void {
    this.rbFlag = !this.rbFlag;
  }

ts说明

在组件初始化的时候获取数据，同时赋值给exampaper，examinationTimeLength，updatedAnswer，传递给其它组件；

“changeLeftBarClass()”和“changeRightBarClass()”方法控制rbFlag和lbFlag进而控制页面的样式

 

小结

OnlineExam组件起到的作用就两个，控制页面和传递数据；
同时也有其他的一些提示和判断功能，属于本组件内部功能，就不多加阐述