【Angular前端工程化实践篇】——(阅读理解)题型组件开发

前端之家收集整理的这篇文章主要介绍了【Angular前端工程化实践篇】——(阅读理解)题型组件开发前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

【前言】

最近前端页面需要做调查问卷这个功能,需要做一系列的题型组件,参考了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,{"key": 2,{"key": 3,"value": "请输入问题选型内容"}
                         ]
                    }
                   ]
                 }],

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": "请输入问题选型内容"}
          ]}
        ]
       });
      
  }
/*
  删除选项-常银玲-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.结果显示

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



【总结】

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

猜你在找的Angularjs相关文章