Modal对话框

API#

NzModalServiceservice#

对话框当前分为 2 种模式，普通模式 和 确认框模式（即Confirm对话框，通过调用confirm/info/success/error/warning弹出），两种模式对 API 的支持程度稍有不同。

采用服务方式创建普通模式对话框#

您可调用 NzModalService.create(options) 来动态创建普通模式对话框，这里的 options 是一个对象，支持上方 API 中给出的支持 普通模式 的参数

确认框模式 - NzModalService.method()#

包括：

• NzModalService.info
• NzModalService.success
• NzModalService.error
• NzModalService.warning
• NzModalService.confirm

以上均为一个函数，参数为 object，与上方 API 一致。部分属性类型或初始值有所不同，已列在下方：

以上函数调用后，会返回一个引用，可以通过该引用关闭弹窗。

constructor(modal: NzModalService) {
  const ref: NzModalRef = modal.info();
  ref.close(); // 或 ref.destroy(); 将直接销毁对话框
}

相关类型定义#

NzModalService 的其他方法/属性service#

NzModalRef#

NzModalRef 对象用于控制对话框以及进行内容间的通信

通过服务方式 NzModalService.xxx() 创建的对话框，都会返回一个 NzModalRef 对象，用于操控该对话框（若使用 nzContent 为 Component 时，也可通过依赖注入 NzModalRef 方式获得此对象），该对象具有以下方法：

ModalButtonOptions（用于自定义底部按钮）#

可将此类型数组传入 nzFooter，用于自定义底部按钮。

按钮配置项如下（与 button 组件保持一致）：

nzFooter: [{
  label: string; // 按钮文本
  type?: string; // 类型
  danger?: boolean; // 是否danger
  shape?: string; // 形状
  ghost?: boolean; // 是否ghost
  size?: string; // 大小
  autoLoading?: boolean; // 默认为true，若为true时，当onClick返回promise时此按钮将自动置为loading状态

  // 提示：下方方法的this指向该配置对象自身。当nzContent为组件类时，下方方法传入的contentComponentInstance参数为该组件类的实例
  // 是否显示该按钮
  show?: boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean);
  // 是否显示为loading
  loading?: boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean);
  // 是否禁用
  disabled?: boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean);
  // 按钮点击回调
  onClick?(this: ModalButtonOptions, contentComponentInstance?: object): void | Promise<void> | any;
}]

以上配置项也可在运行态实时改变，来触发按钮行为改变。

[nzModalTitle]directive#

自定义标题。

<div *nzModalTitle> Custom Modal Title </div>

<!-- or -->

<ng-template [nzModalTitle]> Custom Modal Title </ng-template>

[nzModalContent]directive#

自定义内容。

<div *nzModalContent> Custom Modal Content </div>

<!-- or -->

<ng-template [nzModalContent]> Custom Modal Content </ng-template>

[nzModalFooter]directive#

自定义页脚。

<div *nzModalFooter>
  <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
  <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
</div>

<!-- or -->

<ng-template [nzModalFooter]>
  <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
  <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
</ng-template>