Modal对话框

模态对话框。

何时使用

需要用户处理事务,又不希望跳转页面以致打断工作流程时,可以使用 Modal 在当前页面正中打开一个浮层,承载相应的操作。

另外当需要一个简洁的确认框询问用户时,可以使用精心封装好的 NzModalService.confirm() 等方法。

推荐使用加载Component的方式弹出Modal,这样弹出层的Component逻辑可以与外层Component完全隔离,并且做到可以随时复用,

在弹出层Component中可以通过依赖注入NzModalRef方式直接获取模态框的组件实例,用于控制在弹出层组件中控制模态框行为。

  1. import { NzModalModule } from 'ng-zorro-antd/modal';

代码演示

Modal对话框 - 图1

基本

第一个对话框。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-modal-basic',
  4. template: `
  5. <button nz-button [nzType]="'primary'" (click)="showModal()"><span>Show Modal</span></button>
  6. <nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
  7. <p>Content one</p>
  8. <p>Content two</p>
  9. <p>Content three</p>
  10. <p>Content three</p>
  11. </nz-modal>
  12. `
  13. })
  14. export class NzDemoModalBasicComponent {
  15. isVisible = false;
  16. constructor() {}
  17. showModal(): void {
  18. this.isVisible = true;
  19. }
  20. handleOk(): void {
  21. console.log('Button ok clicked!');
  22. this.isVisible = false;
  23. }
  24. handleCancel(): void {
  25. console.log('Button cancel clicked!');
  26. this.isVisible = false;
  27. }
  28. }

Modal对话框 - 图2

自定义页脚

更复杂的例子,自定义了页脚的按钮,点击提交后进入 loading 状态,完成后关闭。

不需要默认确定取消按钮时,你可以把 nzFooter 设为 null

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-modal-footer',
  4. template: `
  5. <button nz-button nzType="primary" (click)="showModal()">
  6. <span>Show Modal</span>
  7. </button>
  8. <nz-modal
  9. [(nzVisible)]="isVisible"
  10. [nzTitle]="modalTitle"
  11. [nzContent]="modalContent"
  12. [nzFooter]="modalFooter"
  13. (nzOnCancel)="handleCancel()"
  14. >
  15. <ng-template #modalTitle>
  16. Custom Modal Title
  17. </ng-template>
  18. <ng-template #modalContent>
  19. <p>Modal Content</p>
  20. <p>Modal Content</p>
  21. <p>Modal Content</p>
  22. <p>Modal Content</p>
  23. <p>Modal Content</p>
  24. </ng-template>
  25. <ng-template #modalFooter>
  26. <span>Modal Footer: </span>
  27. <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
  28. <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
  29. </ng-template>
  30. </nz-modal>
  31. `
  32. })
  33. export class NzDemoModalFooterComponent {
  34. isVisible = false;
  35. isConfirmLoading = false;
  36. constructor() {}
  37. showModal(): void {
  38. this.isVisible = true;
  39. }
  40. handleOk(): void {
  41. this.isConfirmLoading = true;
  42. setTimeout(() => {
  43. this.isVisible = false;
  44. this.isConfirmLoading = false;
  45. }, 3000);
  46. }
  47. handleCancel(): void {
  48. this.isVisible = false;
  49. }
  50. }

Modal对话框 - 图3

确认对话框

使用 NzModalService.confirm() 可以快捷地弹出确认框。

  1. import { Component } from '@angular/core';
  2. import { NzModalService } from 'ng-zorro-antd/modal';
  3. @Component({
  4. selector: 'nz-demo-modal-confirm',
  5. template: `
  6. <button nz-button nzType="info" (click)="showConfirm()">Confirm</button>
  7. <button nz-button nzType="dashed" (click)="showDeleteConfirm()">Delete</button>
  8. `,
  9. styles: [
  10. `
  11. button {
  12. margin-right: 8px;
  13. }
  14. `
  15. ]
  16. })
  17. export class NzDemoModalConfirmComponent {
  18. constructor(private modal: NzModalService) {}
  19. showConfirm(): void {
  20. this.modal.confirm({
  21. nzTitle: '<i>Do you Want to delete these items?</i>',
  22. nzContent: '<b>Some descriptions</b>',
  23. nzOnOk: () => console.log('OK')
  24. });
  25. }
  26. showDeleteConfirm(): void {
  27. this.modal.confirm({
  28. nzTitle: 'Are you sure delete this task?',
  29. nzContent: '<b style="color: red;">Some descriptions</b>',
  30. nzOkText: 'Yes',
  31. nzOkType: 'danger',
  32. nzOnOk: () => console.log('OK'),
  33. nzCancelText: 'No',
  34. nzOnCancel: () => console.log('Cancel')
  35. });
  36. }
  37. }

Modal对话框 - 图4

信息提示

各种类型的信息提示,只提供一个按钮用于关闭。

  1. import { Component } from '@angular/core';
  2. import { NzModalService } from 'ng-zorro-antd/modal';
  3. @Component({
  4. selector: 'nz-demo-modal-info',
  5. template: `
  6. <button nz-button (click)="info()">Info</button>
  7. <button nz-button (click)="success()">Success</button>
  8. <button nz-button (click)="error()">Error</button>
  9. <button nz-button (click)="warning()">Warning</button>
  10. `,
  11. styles: [
  12. `
  13. button {
  14. margin-right: 8px;
  15. }
  16. `
  17. ]
  18. })
  19. export class NzDemoModalInfoComponent {
  20. constructor(private modal: NzModalService) {}
  21. info(): void {
  22. this.modal.info({
  23. nzTitle: 'This is a notification message',
  24. nzContent: '<p>some messages...some messages...</p><p>some messages...some messages...</p>',
  25. nzOnOk: () => console.log('Info OK')
  26. });
  27. }
  28. success(): void {
  29. this.modal.success({
  30. nzTitle: 'This is a success message',
  31. nzContent: 'some messages...some messages...'
  32. });
  33. }
  34. error(): void {
  35. this.modal.error({
  36. nzTitle: 'This is an error message',
  37. nzContent: 'some messages...some messages...'
  38. });
  39. }
  40. warning(): void {
  41. this.modal.warning({
  42. nzTitle: 'This is an warning message',
  43. nzContent: 'some messages...some messages...'
  44. });
  45. }
  46. }

Modal对话框 - 图5

手动移除

手动关闭modal。

  1. import { Component } from '@angular/core';
  2. import { NzModalService } from 'ng-zorro-antd/modal';
  3. @Component({
  4. selector: 'nz-demo-modal-manual',
  5. template: `
  6. <button nz-button (click)="success()">Success</button>
  7. `
  8. })
  9. export class NzDemoModalManualComponent {
  10. constructor(private modalService: NzModalService) {}
  11. success(): void {
  12. const modal = this.modalService.success({
  13. nzTitle: 'This is a notification message',
  14. nzContent: 'This modal will be destroyed after 1 second'
  15. });
  16. setTimeout(() => modal.destroy(), 1000);
  17. }
  18. }

Modal对话框 - 图6

服务方式创建

Modal的service用法,示例中演示了用户自定义模板、自定义component、以及注入模态框实例的方法。

使用模版作为内容时上下文为 { $implicit: nzComponentParams, modalRef: NzModalRef }

  1. /* declarations: NzModalCustomComponent */
  2. import { Component, Input, TemplateRef } from '@angular/core';
  3. import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
  4. @Component({
  5. selector: 'nz-demo-modal-service',
  6. template: `
  7. <button nz-button nzType="primary" (click)="createModal()">
  8. <span>String</span>
  9. </button>
  10. <button nz-button nzType="primary" (click)="createTplModal(tplTitle, tplContent, tplFooter)">
  11. <span>Template</span>
  12. </button>
  13. <ng-template #tplTitle>
  14. <span>Title Template</span>
  15. </ng-template>
  16. <ng-template #tplContent let-params let-ref="modalRef">
  17. <p>some contents...</p>
  18. <p>some contents...</p>
  19. <p>{{ params.value }}</p>
  20. <button nz-button (click)="ref.destroy()">Destroy</button>
  21. </ng-template>
  22. <ng-template #tplFooter>
  23. <button nz-button nzType="primary" (click)="destroyTplModal()" [nzLoading]="tplModalButtonLoading">
  24. Close after submit
  25. </button>
  26. </ng-template>
  27. <br /><br />
  28. <button nz-button nzType="primary" (click)="createComponentModal()">
  29. <span>Use Component</span>
  30. </button>
  31. <button nz-button nzType="primary" (click)="createCustomButtonModal()">Custom Button</button>
  32. <br /><br />
  33. <button nz-button nzType="primary" (click)="openAndCloseAll()">Open more modals then close all after 2s</button>
  34. <nz-modal [(nzVisible)]="htmlModalVisible" nzMask="false" nzZIndex="1001" nzTitle="Non-service html modal"
  35. >This is a non-service html modal</nz-modal
  36. >
  37. `,
  38. styles: [
  39. `
  40. button {
  41. margin-right: 8px;
  42. }
  43. `
  44. ]
  45. })
  46. export class NzDemoModalServiceComponent {
  47. tplModal: NzModalRef;
  48. tplModalButtonLoading = false;
  49. htmlModalVisible = false;
  50. disabled = false;
  51. constructor(private modal: NzModalService) {}
  52. createModal(): void {
  53. this.modal.create({
  54. nzTitle: 'Modal Title',
  55. nzContent: 'string, will close after 1 sec',
  56. nzClosable: false,
  57. nzOnOk: () => new Promise(resolve => setTimeout(resolve, 1000))
  58. });
  59. }
  60. createTplModal(tplTitle: TemplateRef<{}>, tplContent: TemplateRef<{}>, tplFooter: TemplateRef<{}>): void {
  61. this.tplModal = this.modal.create({
  62. nzTitle: tplTitle,
  63. nzContent: tplContent,
  64. nzFooter: tplFooter,
  65. nzMaskClosable: false,
  66. nzClosable: false,
  67. nzComponentParams: {
  68. value: 'Template Context'
  69. },
  70. nzOnOk: () => console.log('Click ok')
  71. });
  72. }
  73. destroyTplModal(): void {
  74. this.tplModalButtonLoading = true;
  75. setTimeout(() => {
  76. this.tplModalButtonLoading = false;
  77. this.tplModal.destroy();
  78. }, 1000);
  79. }
  80. createComponentModal(): void {
  81. const modal = this.modal.create({
  82. nzTitle: 'Modal Title',
  83. nzContent: NzModalCustomComponent,
  84. nzGetContainer: () => document.body,
  85. nzComponentParams: {
  86. title: 'title in component',
  87. subtitle: 'component sub title,will be changed after 2 sec'
  88. },
  89. nzOnOk: () => new Promise(resolve => setTimeout(resolve, 1000)),
  90. nzFooter: [
  91. {
  92. label: 'change component title from outside',
  93. onClick: componentInstance => {
  94. componentInstance!.title = 'title in inner component is changed';
  95. }
  96. }
  97. ]
  98. });
  99. const instance = modal.getContentComponent();
  100. modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
  101. // Return a result when closed
  102. modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
  103. // delay until modal instance created
  104. setTimeout(() => {
  105. instance.subtitle = 'sub title is changed';
  106. }, 2000);
  107. }
  108. createCustomButtonModal(): void {
  109. const modal: NzModalRef = this.modal.create({
  110. nzTitle: 'custom button demo',
  111. nzContent: 'pass array of button config to nzFooter to create multiple buttons',
  112. nzFooter: [
  113. {
  114. label: 'Close',
  115. shape: 'round',
  116. onClick: () => modal.destroy()
  117. },
  118. {
  119. label: 'Confirm',
  120. type: 'primary',
  121. onClick: () => this.modal.confirm({ nzTitle: 'Confirm Modal Title', nzContent: 'Confirm Modal Content' })
  122. },
  123. {
  124. label: 'Change Button Status',
  125. type: 'danger',
  126. loading: false,
  127. onClick(): void {
  128. this.loading = true;
  129. setTimeout(() => (this.loading = false), 1000);
  130. setTimeout(() => {
  131. this.loading = false;
  132. this.disabled = true;
  133. this.label = 'can not be clicked!';
  134. }, 2000);
  135. }
  136. },
  137. {
  138. label: 'async load',
  139. type: 'dashed',
  140. onClick: () => new Promise(resolve => setTimeout(resolve, 2000))
  141. }
  142. ]
  143. });
  144. }
  145. openAndCloseAll(): void {
  146. let pos = 0;
  147. ['create', 'info', 'success', 'error'].forEach(method =>
  148. // @ts-ignore
  149. this.modal[method]({
  150. nzMask: false,
  151. nzTitle: `Test ${method} title`,
  152. nzContent: `Test content: <b>${method}</b>`,
  153. nzStyle: { position: 'absolute', top: `${pos * 70}px`, left: `${pos++ * 300}px` }
  154. })
  155. );
  156. this.htmlModalVisible = true;
  157. this.modal.afterAllClose.subscribe(() => console.log('afterAllClose emitted!'));
  158. setTimeout(() => this.modal.closeAll(), 2000);
  159. }
  160. }
  161. @Component({
  162. selector: 'nz-modal-custom-component',
  163. template: `
  164. <div>
  165. <h2>{{ title }}</h2>
  166. <h4>{{ subtitle }}</h4>
  167. <p>
  168. <span>Get Modal instance in component</span>
  169. <button nz-button [nzType]="'primary'" (click)="destroyModal()">destroy modal in the component</button>
  170. </p>
  171. </div>
  172. `
  173. })
  174. export class NzModalCustomComponent {
  175. @Input() title: string;
  176. @Input() subtitle: string;
  177. constructor(private modal: NzModalRef) {}
  178. destroyModal(): void {
  179. this.modal.destroy({ data: 'this the result data' });
  180. }
  181. }

Modal对话框 - 图7

异步关闭

点击确定后异步关闭对话框,例如提交表单。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-modal-async',
  4. template: `
  5. <button nz-button nzType="primary" (click)="showModal()">
  6. <span>Show Modal</span>
  7. </button>
  8. <nz-modal
  9. [(nzVisible)]="isVisible"
  10. nzTitle="Modal Title"
  11. (nzOnCancel)="handleCancel()"
  12. (nzOnOk)="handleOk()"
  13. [nzOkLoading]="isOkLoading"
  14. >
  15. <p>Modal Content</p>
  16. </nz-modal>
  17. `
  18. })
  19. export class NzDemoModalAsyncComponent {
  20. isVisible = false;
  21. isOkLoading = false;
  22. showModal(): void {
  23. this.isVisible = true;
  24. }
  25. handleOk(): void {
  26. this.isOkLoading = true;
  27. setTimeout(() => {
  28. this.isVisible = false;
  29. this.isOkLoading = false;
  30. }, 3000);
  31. }
  32. handleCancel(): void {
  33. this.isVisible = false;
  34. }
  35. }

Modal对话框 - 图8

自定义页脚(2)

使用 nzModalFooter 指令自定义了页脚的按钮。

  1. /* declarations: NzModalCustomFooterComponent */
  2. import { Component } from '@angular/core';
  3. import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
  4. @Component({
  5. selector: 'nz-demo-modal-footer2',
  6. template: `
  7. <button nz-button nzType="primary" (click)="showModal1()">
  8. <span>In Template</span>
  9. </button>
  10. <br />
  11. <br />
  12. <button nz-button nzType="primary" (click)="showModal2()">
  13. <span>In Component</span>
  14. </button>
  15. <nz-modal [(nzVisible)]="isVisible" nzTitle="Custom Modal Title" (nzOnCancel)="handleCancel()">
  16. <div>
  17. <p>Modal Content</p>
  18. <p>Modal Content</p>
  19. <p>Modal Content</p>
  20. <p>Modal Content</p>
  21. <p>Modal Content</p>
  22. </div>
  23. <div *nzModalFooter>
  24. <span>Modal Footer: </span>
  25. <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
  26. <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
  27. </div>
  28. </nz-modal>
  29. `,
  30. styles: []
  31. })
  32. export class NzDemoModalFooter2Component {
  33. isVisible = false;
  34. isConfirmLoading = false;
  35. constructor(private modalService: NzModalService) {}
  36. showModal1(): void {
  37. this.isVisible = true;
  38. }
  39. showModal2(): void {
  40. this.modalService.create({
  41. nzTitle: 'Modal Title',
  42. nzContent: NzModalCustomFooterComponent
  43. });
  44. }
  45. handleOk(): void {
  46. this.isConfirmLoading = true;
  47. setTimeout(() => {
  48. this.isVisible = false;
  49. this.isConfirmLoading = false;
  50. }, 3000);
  51. }
  52. handleCancel(): void {
  53. this.isVisible = false;
  54. }
  55. }
  56. @Component({
  57. selector: 'nz-modal-custom-footer-component',
  58. template: `
  59. <div>
  60. <p>Modal Content</p>
  61. <p>Modal Content</p>
  62. <p>Modal Content</p>
  63. <p>Modal Content</p>
  64. <p>Modal Content</p>
  65. </div>
  66. <div *nzModalFooter>
  67. <button nz-button nzType="default" (click)="destroyModal()">Custom Callback</button>
  68. <button nz-button nzType="primary" (click)="destroyModal()">Custom Submit</button>
  69. </div>
  70. `
  71. })
  72. export class NzModalCustomFooterComponent {
  73. constructor(private modal: NzModalRef) {}
  74. destroyModal(): void {
  75. this.modal.destroy();
  76. }
  77. }

Modal对话框 - 图9

确认对话框

使用 NzModalService.confirm() 可以快捷地弹出确认框。NzOnCancel/NzOnOk 返回 promise 可以延迟关闭

  1. import { Component } from '@angular/core';
  2. import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
  3. @Component({
  4. selector: 'nz-demo-modal-confirm-promise',
  5. template: `
  6. <button nz-button nzType="info" (click)="showConfirm()">Confirm</button>
  7. `
  8. })
  9. export class NzDemoModalConfirmPromiseComponent {
  10. confirmModal: NzModalRef; // For testing by now
  11. constructor(private modal: NzModalService) {}
  12. showConfirm(): void {
  13. this.confirmModal = this.modal.confirm({
  14. nzTitle: 'Do you Want to delete these items?',
  15. nzContent: 'When clicked the OK button, this dialog will be closed after 1 second',
  16. nzOnOk: () =>
  17. new Promise((resolve, reject) => {
  18. setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
  19. }).catch(() => console.log('Oops errors!'))
  20. });
  21. }
  22. }

Modal对话框 - 图10

国际化

设置 nzOkTextnzCancelText 以自定义按钮文字。

  1. import { Component } from '@angular/core';
  2. import { NzModalService } from 'ng-zorro-antd/modal';
  3. @Component({
  4. selector: 'nz-demo-modal-locale',
  5. template: `
  6. <div>
  7. <button nz-button nzType="primary" (click)="showModal()">Modal</button>
  8. <nz-modal
  9. [(nzVisible)]="isVisible"
  10. nzTitle="Modal"
  11. nzOkText="Ok"
  12. nzCancelText="Cancel"
  13. (nzOnOk)="handleOk()"
  14. (nzOnCancel)="handleCancel()"
  15. >
  16. <p>Bla bla ...</p>
  17. <p>Bla bla ...</p>
  18. <p>Bla bla ...</p>
  19. </nz-modal>
  20. </div>
  21. <br />
  22. <button nz-button nzType="info" (click)="showConfirm()">Confirm</button>
  23. `
  24. })
  25. export class NzDemoModalLocaleComponent {
  26. isVisible = false;
  27. constructor(private modalService: NzModalService) {}
  28. showModal(): void {
  29. this.isVisible = true;
  30. }
  31. handleOk(): void {
  32. this.isVisible = false;
  33. }
  34. handleCancel(): void {
  35. this.isVisible = false;
  36. }
  37. showConfirm(): void {
  38. this.modalService.confirm({
  39. nzTitle: 'Confirm',
  40. nzContent: 'Bla bla ...',
  41. nzOkText: 'OK',
  42. nzCancelText: 'Cancel'
  43. });
  44. }
  45. }

Modal对话框 - 图11

自定义位置

您可以直接使用 nzStyle.top 或配合其他样式来设置对话框位置。

注意 由于Angular的样式隔离,若在Component中没有加入encapsulation: ViewEncapsulation.None,则您可能需要在自定义样式内采用::ng-deep来覆盖NgZorro的样式

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-modal-position',
  4. template: `
  5. <button nz-button nzType="primary" (click)="showModalTop()">Display a modal dialog at 20px to Top</button>
  6. <nz-modal
  7. [nzStyle]="{ top: '20px' }"
  8. [(nzVisible)]="isVisibleTop"
  9. nzTitle="20px to Top"
  10. (nzOnCancel)="handleCancelTop()"
  11. (nzOnOk)="handleOkTop()"
  12. >
  13. <p>some contents...</p>
  14. <p>some contents...</p>
  15. <p>some contents...</p>
  16. </nz-modal>
  17. <br /><br />
  18. <button nz-button nzType="primary" (click)="showModalMiddle()">Vertically centered modal dialog</button>
  19. <nz-modal
  20. nzWrapClassName="vertical-center-modal"
  21. [(nzVisible)]="isVisibleMiddle"
  22. nzTitle="Vertically centered modal dialog"
  23. (nzOnCancel)="handleCancelMiddle()"
  24. (nzOnOk)="handleOkMiddle()"
  25. >
  26. <p>some contents...</p>
  27. <p>some contents...</p>
  28. <p>some contents...</p>
  29. </nz-modal>
  30. `,
  31. styles: [
  32. `
  33. ::ng-deep .vertical-center-modal {
  34. display: flex;
  35. align-items: center;
  36. justify-content: center;
  37. }
  38. ::ng-deep .vertical-center-modal .ant-modal {
  39. top: 0;
  40. }
  41. `
  42. ]
  43. })
  44. export class NzDemoModalPositionComponent {
  45. isVisibleTop = false;
  46. isVisibleMiddle = false;
  47. showModalTop(): void {
  48. this.isVisibleTop = true;
  49. }
  50. showModalMiddle(): void {
  51. this.isVisibleMiddle = true;
  52. }
  53. handleOkTop(): void {
  54. console.log('点击了确定');
  55. this.isVisibleTop = false;
  56. }
  57. handleCancelTop(): void {
  58. this.isVisibleTop = false;
  59. }
  60. handleOkMiddle(): void {
  61. console.log('click ok');
  62. this.isVisibleMiddle = false;
  63. }
  64. handleCancelMiddle(): void {
  65. this.isVisibleMiddle = false;
  66. }
  67. }

API

NzModalServiceservice

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

参数说明类型默认值全局配置
nzAfterOpenModal 打开后的回调EventEmitter-
nzAfterCloseModal 完全关闭后的回调,可监听close/destroy方法传入的参数EventEmitter-
nzBodyStyleModal body 样式object-
nzCancelText取消按钮文字。设为 null 表示不显示取消按钮(若在普通模式下使用了 nzFooter 参数,则该值无效)string取消
nzClosable是否显示右上角的关闭按钮。确认框模式下该值无效(默认会被隐藏)booleantrue
nzOkLoading确定按钮 loadingbooleanfalse
nzCancelLoading取消按钮 loadingbooleanfalse
nzOkDisabled是否禁用确定按钮booleanfalse
nzCancelDisabled是否禁用取消按钮booleanfalse
nzFooter底部内容。1. 仅在普通模式下有效。
2. 可通过传入 ModalButtonOptions 来最大程度自定义按钮(详见案例或下方说明)。
3. 当不需要底部时,可以设为 null
string
TemplateRef
ModalButtonOptions
默认的确定取消按钮
nzGetContainer指定 Modal 挂载的 HTML 节点HTMLElement
() => HTMLElement
默认容器
nzKeyboard是否支持键盘esc关闭booleantrue
nzMask是否展示遮罩booleantrue
nzMaskClosable点击蒙层是否允许关闭booleantrue
nzMaskStyle遮罩样式object-
nzOkText确认按钮文字。设为 null 表示不显示确认按钮(若在普通模式下使用了 nzFooter 参数,则该值无效)string确定
nzOkType确认按钮类型。与button的type类型值一致stringprimary
nzStyle可用于设置浮层的样式,调整浮层位置等object-
nzTitle标题。留空表示不展示标题。TemplateRef的使用方法可参考案例string
TemplateRef
-
nzCloseIcon自定义关闭图标string|TemplateRef<void>-
nzVisible对话框是否可见。当以 <nz-modal> 标签使用时,请务必使用双向绑定,例如:[(nzVisible)]=”visible”booleanfalse
nzWidth宽度。使用数字时,默认单位为pxstring
number
520
nzClassName对话框的类名string-
nzWrapClassName对话框外层容器的类名string-
nzZIndex设置 Modal 的 z-indexnumber1000
nzOnCancel点击遮罩层或右上角叉或取消按钮的回调(若nzContent为Component,则将会以该Component实例作为参数)。注:当以NzModalService.create创建时,此参数应传入function(回调函数)。该函数可返回promise,待执行完毕或promise结束时,将自动关闭对话框(返回false可阻止关闭)EventEmitter-
nzOnOk点击确定回调(若nzContent为Component,则将会以该Component实例作为参数)。注:当以NzModalService.create创建时,此参数应传入function(回调函数)。该函数可返回promise,待执行完毕或promise结束时,将自动关闭对话框(返回false可阻止关闭)EventEmitter-
nzContent内容string
TemplateRef
Component
ng-content
-
nzComponentParams当nzContent为组件类(Component)时,该参数中的属性将传入nzContent实例中object-
nzIconType图标 Icon 类型。仅 确认框模式 下有效string‘question-circle’
nzAutofocus自动聚焦及聚焦位置,为 null 时禁用‘ok’ | ‘cancel’ | ‘auto’ | null‘auto’

注意

<nz-modal> 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容,请采用 NzModalService 服务方式创建对话框(当以服务方式创建时,默认会监听 nzAfterClose 并销毁对话框)。

通过 NzModalService 服务方式创建的对话框需要自行管理其生命周期。比如你在页面路由切换时,服务方式创建的对话框并不会被销毁,你需要使用对话框引用来手动销毁(NzModalRef.close()NzModalRef.destroy())。

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

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

确认框模式 - NzModalService.method()

包括:

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

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

参数说明类型默认值
nzOnOk点击确定按钮时将执行的回调函数(若nzContent为Component,则将会以该Component实例作为参数)。该函数可返回promise,待执行完毕或promise结束时,将自动关闭对话框(返回false可阻止关闭)function-
nzOnCancel点击遮罩层或右上角叉或取消按钮的回调(若nzContent为Component,则将会以该Component实例作为参数)。该函数可返回promise,待执行完毕或promise结束时,将自动关闭对话框(返回false可阻止关闭)function-
nzWidth宽度string
number
416
nzMaskClosable点击蒙层是否允许关闭booleanfalse

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

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

相关类型定义

NzModalService的其他方法/属性service

方法/属性说明类型
openModals当前打开的所有Modal引用列表NzModalRef[]
afterAllClose所有Modal完全关闭后的回调Observable<void>
closeAll()关闭所有模态框function

NzModalRef

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

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

方法/属性说明
afterOpen同nzAfterOpen,但类型为Observable<void>
afterClose同nzAfterClose,但类型为Observable<result:any>
open()打开(显示)对话框。若对话框已销毁,则调用此函数将失效
close(result: any)关闭(隐藏)对话框。注:当用于以服务方式创建的对话框,此方法将直接 销毁 对话框(同destroy方法)
destroy(result: any)销毁对话框。注:仅用于服务方式创建的对话框(非服务方式创建的对话框,此方法只会隐藏对话框)
getContentComponent()获取对话框内容中nzContent的Component实例instance。注:当对话框还未初始化完毕(ngOnInit未执行)时,此函数将返回undefined
triggerOk()手动触发nzOnOk
triggerCancel()手动触发nzOnCancel

ModalButtonOptions(用于自定义底部按钮)

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

按钮配置项如下(与button组件保持一致):

  1. nzFooter: [{
  2. label: string; // 按钮文本
  3. type?: string; // 类型
  4. shape?: string; // 形状
  5. ghost?: boolean; // 是否ghost
  6. size?: string; // 大小
  7. autoLoading?: boolean; // 默认为true,若为true时,当onClick返回promise时此按钮将自动置为loading状态
  8. // 提示:下方方法的this指向该配置对象自身。当nzContent为组件类时,下方方法传入的contentComponentInstance参数为该组件类的实例
  9. // 是否显示该按钮
  10. show?: boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean);
  11. // 是否显示为loading
  12. loading?: boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean);
  13. // 是否禁用
  14. disabled?: boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean);
  15. // 按钮点击回调
  16. onClick?(this: ModalButtonOptions, contentComponentInstance?: object): void | Promise&lt;void&gt; | any;
  17. }]

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

[nzModalFooter]directive

另一种自定义页脚按钮的方式。

  1. <div *nzModalFooter>
  2. <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
  3. <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
  4. </div>
  5. <!-- or -->
  6. <ng-template [nzModalFooter]>
  7. <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
  8. <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
  9. </ng-template>