服务式创建模态框，做可复用表单

• 一、需求&版本
• • • 需求
    • 版本
• 二、方法
• • 1.页面
  • 2.modal组件
• 效果展示

一、需求&版本

需求

• 创建服务式modal，其中是新建/编辑的表单
• 组件可复用
• 底部按钮在modal组件中，防止重复提交
• 组件中确定后刷新页面列表
• 关闭modal后，页面根据modal层是点击的取消还是确认来决定是否更新数据

版本

angular9
zorro9

二、方法

重点：将nzFooter=null

1.页面

html

服务式创建模态框

js

constructor(private modal: NzModalService) {}creatForm(): void {const modal = this.modal.create({nzTitle: '新增',nzContent: NewmodalComponent,nzComponentParams: {txt: '新增数据的内容区哈',},nzFooter: null});modal.afterClose.subscribe( res => {console.log('afterClose-res: ', res);if(res){console.log('更新数据啦');}})
}

2.modal组件

1.html

{{ txt }} 

2.js

import { NzModalRef } from 'ng-zorro-antd';@Input() txt: any;
public showLoading = false;close() {console.log('close: ');this.modalRef.destroy();
}submit() {console.log('submit: ');this.showLoading = true;setTimeout(()=>{this.showLoading = false;this.modalRef.destroy('suc');},1000)
}constructor(private modalRef: NzModalRef,
) { }

3.css

.myModalCon{padding: 24px;
}
.myModalFoot{padding: 10px 16px;border-top: 1px solid #f0f0f0;text-align: right;button{display: inline-block;margin-left: 8px;}
}
::ng-deep .ant-modal-body{padding: 0;
}

效果展示

最后，如果帮你的话，希望小伙伴们打赏一毛钱

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！