【Angular2】AnswerSheet组件设计

引言

在【Angular2】试卷整体设计中说到AnswerSheet组件的卡功能是可以显示用户对每道题答题状态，点击答题卡可以定位到相应题目；

同时，这里也有一些组件交互的问题需要讨论

 

功能要求

1.显示用户对每道题答题状态；
2.点击答题卡可以定位到相应题目；

 

代码说明

html code

<div id="answer_sheet">
  <div class="sidebar_title">答题卡div>
  <div *ngIf="exampaper">
    <div *ngFor="let qt of exampaper.paperQuestionTypeList; let i=index">
      <div class="cards">
        <h4>{{USN[i]+qt.questionTypeName}}h4>
        <div *ngFor="let qm of qt.questionMainList; let j=index">
          
          
          
          <div *ngIf="qm.questionSubList[0]">
            <div id="{{qm.id}}" class="card" (click)="locateQuestion($event.target)">{{j+1}}div>
          div>
          <div *ngIf="!qm.questionSubList[0]">
            <div *ngFor="let qs of qm.smallquestionMainList; let k=index">
              <div id="{{qs.id}}" class="card" (click)="locateQuestion($event.target)">{{k+1}}div>
            div>
          div>
        div>
        <div style="clear:both;">div>
      div>
      <br/>
    div>
  div>
div>

html 说明

这里就是对数据的循环处理，需要注意的数据中的子题干问题，因为答题卡也是通过试卷实体来遍历出要显示的内容；

这里简单说一下试卷实体，包括题型实体集合，题型集合中包括题干实体集合，题干实体包括选项实体集合和子题干实体集合，子题干实体集合又包括子题干实体集合和选项集合…所以遍历的时候需要依自己数据类型而定；

---

ts code

  @Input() exampaper: ExamPaperModel;
  @Input() updatedAnswer: Answer;
  USN = UpSerialNumber; //大题题号（汉字）

  /* 监测父组件提供输入值的变化 */
  ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
    for (let propName in changes) {
      let changedProp = changes[propName];
      let answer = changedProp.currentValue;
      if (!changedProp.isFirstChange()) {
        let el = document.getElementById(answer.questionMainId);
        if(answer.done){
          if (el != null) { el.setAttribute("class", "card_done"); }
        }else{
          if (el != null) { el.setAttribute("class", "card"); }
        }
      } 
    }
  }

  /* 定位到问题位置 */
  locateQuestion(el: Element){
    let questionid: string = el.getAttribute("id");
    let questiondiv = document.getElementsByName(questionid);
    questiondiv[0].scrollIntoView(true);//true：元素顶部与窗口顶部齐平；false：元素底部与窗口底部齐平
  }

ts 说明

如注释说明，通过simplechange机制来实现子组件监测父组件输入值得变化；

这里值得一提的是如果传入的是一个实体，simplechange监测的应该是实体的地址，如果是同一个实体，只改变实体里面的属性，是感知不到变化的，所以每次提交实体需要new一个新的；

 

小结

AnswerSheet组件就是对SimpleChange的一个应用，涉及到了组件之间的交互；
同时，需要设置好元素的id，进行相应的操作