diff --git a/src/components/modal/nz-modal.service.ts b/src/components/modal/nz-modal.service.ts index c8cae4f4dc9..b3e7ad0de67 100644 --- a/src/components/modal/nz-modal.service.ts +++ b/src/components/modal/nz-modal.service.ts @@ -29,6 +29,7 @@ export interface ConfigInterface { maskClosable?: boolean; wrapClassName?: string; footer?: TemplateRef | boolean; + showConfirmLoading?: boolean; onOk?: Function; onCancel?: Function; componentParams?: Object; @@ -81,7 +82,8 @@ export class NzModalService { } }); - props[ 'onOk' ] = this._getConfirmCb(props[ 'nzOnOk' ]); + const isShowConfirmLoading = !!config[ 'showConfirmLoading' ]; + props[ 'onOk' ] = this._getConfirmCb(props[ 'nzOnOk' ], isShowConfirmLoading); props[ 'onCancel' ] = this._getConfirmCb(props[ 'nzOnCancel' ]); // 在service模式下,不需要nzOnOk,防止触发this.nzOnOk.emit(e); delete props[ 'nzOnOk' ]; @@ -89,8 +91,11 @@ export class NzModalService { return props; } - _getConfirmCb(fn?: Function): Function { - return (_close) => { + _getConfirmCb(fn?: Function, isShowConfirmLoading: boolean = false): Function { + return (_close, _instance) => { + if (isShowConfirmLoading) { + _instance.nzConfirmLoading = true; + } if (fn) { const ret = fn(); if (!ret) { @@ -132,7 +137,7 @@ export class NzModalService { setTimeout(() => { compRef.destroy(); }, 200); - }); + }, instance); } }); }); diff --git a/src/showcase/nz-demo-modal/nz-demo-confirm-async.component.ts b/src/showcase/nz-demo-modal/nz-demo-confirm-async.component.ts index cbaad6e0a4c..65f0103bd19 100644 --- a/src/showcase/nz-demo-modal/nz-demo-confirm-async.component.ts +++ b/src/showcase/nz-demo-modal/nz-demo-confirm-async.component.ts @@ -16,6 +16,7 @@ export class NzDemoConfirmAsyncComponent { this.confirmServ.confirm({ title : '您是否确认要删除这项内容', content: '点确认 1 秒后关闭', + showConfirmLoading: true, onOk() { return new Promise((resolve) => { setTimeout(resolve, 1000); diff --git a/src/showcase/nz-demo-modal/nz-demo-modal-service.component.ts b/src/showcase/nz-demo-modal/nz-demo-modal-service.component.ts index 2273a58381f..a59f90f8a73 100644 --- a/src/showcase/nz-demo-modal/nz-demo-modal-service.component.ts +++ b/src/showcase/nz-demo-modal/nz-demo-modal-service.component.ts @@ -49,6 +49,7 @@ export class NzDemoModalServiceComponent { title : '对话框标题', content : '纯文本内容,点确认 1 秒后关闭', closable: false, + showConfirmLoading: true, onOk() { return new Promise((resolve) => { setTimeout(resolve, 1000); diff --git a/src/showcase/nz-demo-modal/nz-demo-modal.html b/src/showcase/nz-demo-modal/nz-demo-modal.html index 359e5657fe0..4b49e049cb4 100644 --- a/src/showcase/nz-demo-modal/nz-demo-modal.html +++ b/src/showcase/nz-demo-modal/nz-demo-modal.html @@ -1,4 +1,4 @@ -
+

Modal 对话框

模态对话框。

何时使用 @@ -355,6 +355,13 @@

NzModalService.xxx() open 无 + + showConfirmLoading + 如果footer没有指定(即展示默认footer)时,确定按钮在执行确定回调时是否显示 loading 状态 + Boolean + All + false +

NzModalSubject对象