引言

在【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 id="{{qm.id}}" class="card" (click)="locateQuestion($event.target)">{{j+1}}</div> --> <!-- 题干有子题干，进行判断 --> <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 = <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，进行相应的操作