《Angular2进阶系列实践》——（阅读理解）题型组件开发

【前言】

     最近前端页面需要做调查问卷这个功能，需要做一系列的题型组件，参考了angular2调查问卷，最终做出了这个效果，感觉非常爽，但是功能上还需要一点小小的调整！

【内容】

 一.题型组件：阅读理解；

 

实现上图的页面效果，并且实现动态功能：添加选项，删除选项；

二.代码如下：

1.question.json：这个json就是初始化时候题型样式

    {
        "title":"问题题干",
        "secondTitle":"问题题干",
        "type":5,
        "options":[{"key": 0, "value": "请输入问题选型内容"}],
        "answer":{}
    },
    {
        "title":"问题题干",
        "type":6,
        "options":[{
                   "key":"0",
                   "value":
                   [
                    {
                        "firstOptions":"请输入问题",
                        "secondOptions":[
                        {"key": 0, "value": "请输入问题选型内容"},  
                        {"key": 1, "value": "请输入问题选型内容"},
                        {"key": 2, "value": "请输入问题选型内容"},
                        {"key": 3, "value": "请输入问题选型内容"}
                         ]
                    }
                   ]
                 }],
         "answer":{}
    },

2.question-reading.component.html:

<div *ngIf="editable && !isEditing">
    <textarea readonly="readonly">{{question.title}}</textarea>
    <div *ngFor="let option of question.options;let o=index" class="radio disabled"> 
         <div *ngFor="let value of option.value" class="radio disabled"> 
          <p>({{o+1}}){{value.firstOptions}}</p>
    <div *ngFor="let second of value.secondOptions;let i=index" class="radio disabled"> 
        <label>
            <input name="group" type="radio" id="{{second.key}}"
                disabled="disabled"/>
                {{Alphabet[i]}}{{second.value}}
        </label>
    </div>
    </div>
    
   <div class="btns">
    <button (click)="onEdit()" class="btn btn-default">编辑</button>
    <button (click)="onDelete()" class= "btn btn-default">删除</button>
    </div>
  </div>
</div>

2.question-reading.component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { QuestionComponent } from '../../index';
import { QuestionModel } from '../../../../models/question.model';
//初始化组件，设置组件的选择器标签，样式，以及标签对应的html
@Component({
  selector: 'question-reading',
  templateUrl: './question-reading.component.html',
  styleUrls: ['./question-reading.component.css']
})
export class QuestionReadingComponent extends QuestionComponent {
  @Input() question: QuestionModel;
  @Input() editable: boolean;
  @Output() deleteQuestionRequest: EventEmitter<any> = new EventEmitter();
  private Alphabet:any[]=["A.","B.","C.","D."];  //设置A，B，C，D选项
 private key: number;
//初始化的时候继承了questionComponent
 ngOnInit() {
    this.copyQuestion();
    let options = this.question.options;
    this.key = options[options.length-1].key;
  }

  /*
  *添加选项-常银玲-2017-7-24 14:51:55
  */
  onAddOption(){
     this.question.options.push(
       {"key": ++this.key,
        "value":
        [
          {"firstOptions":"请输入问题",
          "secondOptions":[
            {"key": 0, "value": "请输入问题选型内容"},  
            {"key": 1, "value": "请输入问题选型内容"},
            {"key": 2, "value": "请输入问题选型内容"},
            {"key": 3, "value": "请输入问题选型内容"}
          ]}
        ]
       });
      
  }
/*
  删除选项-常银玲-2017-7-24 14:52:37
*/
  onDeleteOption(index:number) {
    if(this.question.options.length <= 1) {
      return;
    }

    this.question.options.splice(index, 1);
  }
}

3.QuestionComponent.ts

import { OnInit, EventEmitter } from '@angular/core';

import { QuestionModel } from '../../models/question.model';

export class QuestionComponent implements OnInit {

  question: QuestionModel;
  backupQuestion: QuestionModel;
  editable: boolean = false;
  isEditing: boolean = false;
  deleteQuestionRequest: EventEmitter<any> = new EventEmitter();

  ngOnInit(){
    this.copyQuestion();
  }

  private copy(source: QuestionModel): QuestionModel {
    return <QuestionModel>JSON.parse(JSON.stringify(source));
  }

  //刚开始初始化的原型
  public copyQuestion() {
    this.backupQuestion = this.copy(this.question);

  }

  onEdit() {
    this.isEditing = true;
  }

  onSave() {
    this.copyQuestion();
    this.isEditing = false;
  }

  onCancel() {
    this.question = this.copy(this.backupQuestion);
    this.isEditing = false;
  }

  onDelete() {
    this.deleteQuestionRequest.emit(this.question);
  }
}

4.question.model.ts:这个相当于问题的实体

export class QuestionModel {
  title:any[]; //问题标题（描述）
  secondTitle?:any[]; //适用于阅读理解
  type:QuestionType;  //问题类型
  options?:any[]; //答案选项
  answer:any; //问题答案
  optionSN?:any[];  //问题前的序号ABCD
  score:number;
}

5.结果显示：

点击编辑添加问题和选项可以保存，编辑也可以添加更多的问题：

【总结】

    这个代码只是其中的一部分，不太全，如果你敢兴趣，欢迎联系我啊！