angular ng-zorro服务式创建模态框的小例子，以及常见坑的解决方法

一、需求&版本

需求

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

版本

angular9, zorro9

二、解决方法

1.列表页面

1.html

<button nz-button nzType="primary" (click)="createModal()">服务式创建模态框（常规版）</button>

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

<div class="content-wrap">
    <div class="cleft">我是左边</div>
    <div class="cright">我是右边</div>
</div>

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