Angular2组件之遮罩

项目介绍

    由于自己能力不够，在打开编辑模态框的时候仍可以删除页面的数据，这就违背了页面的设置原则。所以，后端的小伙伴建议我加上遮罩，这样就不会让用户误操作从而导致系统的数据混乱的问题。

解决方案

    参照使用bootstrap的js插件，使用modals来实现遮罩效果。

官网

    http://v3.bootcss.com/javascript/#modals

HTML文件

    1、首先，添加一个按钮，并隐藏。

<button #mymodal type="button" data-toggle="modal" data-target="#editMask"style="visibility:hidden"></button>

data-target中的标签ideditMask为模态框标签id

    2、添加模态框

<!-- editModal 编辑考场-->
<div class="modal fade" id="editMask" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="myModalLabel"
    (click)="draggable()">
    <div #editModal class="modal-dialog" role="document">
        <div class="modal-content" style="margin-top: 38%;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">编辑考场信息</h4>
            </div>
            <div class="modal-body">
                <form role="form" class="form-horizontal" #editform="ngForm">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">考场名称：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="如：2016级走进英国第1场 " [(ngModel)]="ExaminationRoomArrangementModel.examinationRoomName"
                                name="examinationRoomName">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" (click)="update($event,editModal)">确定</button>
            </div>
        </div>
    </div>
</div>

    3、添加触发按钮事件

<div class="container" style="margin-bottom:10px;width:95%;">
    <div class="row">
        <data-table (deletesEmit)="deleteDatas($event)" (changepage)="changepage($event)" [isCheckBox]="isCheck" [isLink]="isLink"
            [editButton]="btnEdit" [title]="title" [page]="page" [addButton]="btnAdd" [deleteButton]="btnDelete" (editData)="edit($event,mymodal)"
            [importButton]="btnImport" [exportButton]="btnExport" [total]="total" (linkClickEmitData)="linkClick($event,studentBtn)"
            [data]="data" [arr]="arrbutes" [buttonstyle]="btnstyle" [sizeList]="sizeList" [paging]="paging" [pageSize]="pageSize">
        </data-table>
    </div>
</div>

    (editData)="edit($event,mymodal)" ，mymodal触发按钮

ts文件

edit(obj: any, mymodal: any) {
    mymodal.click();     
  }

    mymodal.click 触发按钮事件。

总结

    人有多大胆，地有多大产。励志做一名满足用户一切需求的合格程序员！