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

一、需求&版本

需求

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

版本

angular9
zorro9

二、方法

重点：将nzFooter=null

1.页面

html

<button nz-button nzType="primary" (click)="creatForm()">服务式创建模态框</button>

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

<div class="myModalCon">{{ txt }} </div>
<footer class="myModalFoot">
    <button nz-button (click)="close()">取消</button>
    <button nz-button nzType="primary" (click)='submit()' [nzLoading]="showLoading">确认</button>
</footer>

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;
}

效果展示

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