文章目录

• 一、需求&版本
• • 需求
  • 版本
• 二、解决方法
• • 1.列表页面
  • • 1.html
    • 2.js
  • 2.modal组件
  • • 1.html
    • 2.js
    • 3.css(演示处理content的padding问题)

一、需求&版本

需求

• 列表页中使用模态框处理新增/编辑功能，提交表单后刷新列表数据；
• 创建服务式modal，其中是新建/编辑的表单；
• 模态框组件可复用；
• 模态框中的提交按钮使用loadding，防止重复提交
• 关闭modal后，页面根据modal层是点击的取消还是确认来决定是否更新数据-
• 内容区清除padding的留白。

版本

angular9, zorro9

二、解决方法

1.列表页面

1.html

服务式创建模态框（常规版）

2.js

import { NzModalService } from 'ng-zorro-antd/modal';
import { ModalSimpleComponent } from './modal-simple/modal-simple.component'; // 引入modal的组件constructor(private modal: NzModalService
) {}/*** 常规的模态框*/
createModal(): void{const modal = this.modal.create({nzTitle: '新增',nzContent: ModalSimpleComponent,nzComponentParams: { // 给modal的参数，注意modal里需要@Input此字段txt: '新增数据的内容区哈',},nzFooter: [{label: '取消',onClick: () => modal.destroy()},{label: '确认',type: 'primary',loading: false,onClick(component):void {this.loading = true; // 让提交按钮显示加载动画，防止重复提交component.submit();} },]});modal.afterClose.subscribe((result:Boolean) => {console.log('simpleModal-afterClose-res: ', result);if(result){// 在此写本页面的业务，例如更新表格的数据// this.getData()}})
}

2.modal组件

1.html

我是左边我是右边

2.js

import { NzModalRef } from 'ng-zorro-antd';@Input() txt: any;
@Input() txt: any;constructor(private nzModalRef: NzModalRef
) { }submit() {console.log('提交表单');setTimeout(() => {this.nzModalRef.destroy(true);}, 1000)
}

3.css(演示处理content的padding问题)

// 处理content有padding留白的问题
.content-wrap{display: flex;border: 1px solid;margin: -24px;.cleft{width: 50%;height: 90px;background: burlywood;}.cright{width: 50%;height: 90px;background:cadetblue}
}

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