• Modal对话框
    • 何时使用
    • 代码演示
    • API
      • 单独引入此组件
      • NzModalServiceservice
        • 注意
        • 采用服务方式创建普通模式对话框
      • 确认框模式 - NzModalService.method()
      • 相关类型定义
        • NzModalService的其他方法/属性service
        • NzModalRef
      • 全局配置
        • ModalButtonOptions(用于自定义底部按钮)

    Modal对话框

    模态对话框。

    何时使用

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

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

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

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

    代码演示

    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. </nz-modal>
    11. `,
    12. styles: []
    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. styles: []
    33. })
    34. export class NzDemoModalFooterComponent {
    35. isVisible = false;
    36. isConfirmLoading = false;
    37. constructor() {}
    38. showModal(): void {
    39. this.isVisible = true;
    40. }
    41. handleOk(): void {
    42. this.isConfirmLoading = true;
    43. setTimeout(() => {
    44. this.isVisible = false;
    45. this.isConfirmLoading = false;
    46. }, 3000);
    47. }
    48. handleCancel(): void {
    49. this.isVisible = false;
    50. }
    51. }

    Modal对话框 - 图3

    确认对话框

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

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

    Modal对话框 - 图4

    国际化

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

    1. import { Component } from '@angular/core';
    2. import { NzModalService } from 'ng-zorro-antd';
    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. styles: []
    25. })
    26. export class NzDemoModalLocaleComponent {
    27. isVisible = false;
    28. constructor(private modalService: NzModalService) {}
    29. showModal(): void {
    30. this.isVisible = true;
    31. }
    32. handleOk(): void {
    33. this.isVisible = false;
    34. }
    35. handleCancel(): void {
    36. this.isVisible = false;
    37. }
    38. showConfirm(): void {
    39. this.modalService.confirm({
    40. nzTitle: 'Confirm',
    41. nzContent: 'Bla bla ...',
    42. nzOkText: 'OK',
    43. nzCancelText: 'Cancel'
    44. });
    45. }
    46. }

    Modal对话框 - 图5

    自定义位置

    您可以直接使用 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. }

    Modal对话框 - 图6

    异步关闭

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

    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. styles: []
    19. })
    20. export class NzDemoModalAsyncComponent {
    21. isVisible = false;
    22. isOkLoading = false;
    23. showModal(): void {
    24. this.isVisible = true;
    25. }
    26. handleOk(): void {
    27. this.isOkLoading = true;
    28. setTimeout(() => {
    29. this.isVisible = false;
    30. this.isOkLoading = false;
    31. }, 3000);
    32. }
    33. handleCancel(): void {
    34. this.isVisible = false;
    35. }
    36. }

    Modal对话框 - 图7

    确认对话框

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

    1. import { Component } from '@angular/core';
    2. import { NzModalService } from 'ng-zorro-antd';
    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 modalService: NzModalService) {}
    19. showConfirm(): void {
    20. this.modalService.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.modalService.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对话框 - 图8

    信息提示

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

    1. import { Component } from '@angular/core';
    2. import { NzModalService } from 'ng-zorro-antd';
    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 modalService: NzModalService) {}
    21. info(): void {
    22. this.modalService.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.modalService.success({
    30. nzTitle: 'This is a success message',
    31. nzContent: 'some messages...some messages...'
    32. });
    33. }
    34. error(): void {
    35. this.modalService.error({
    36. nzTitle: 'This is an error message',
    37. nzContent: 'some messages...some messages...'
    38. });
    39. }
    40. warning(): void {
    41. this.modalService.warning({
    42. nzTitle: 'This is an warning message',
    43. nzContent: 'some messages...some messages...'
    44. });
    45. }
    46. }

    Modal对话框 - 图9

    手动移除

    手动关闭modal。

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

    Modal对话框 - 图10

    服务方式创建

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

    注意 如果使用Component模式,则需要在NgModule中的 declarationsentryComponents 加入自定义的Component

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

    API

    单独引入此组件

    想要了解更多关于单独引入组件的内容,可以在快速上手页面进行查看。

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

    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. 当不需要底部时,可以设为 nullstringTemplateRefModalButtonOptions默认的确定取消按钮
    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的使用方法可参考案例stringTemplateRef-
    nzVisible对话框是否可见。当以 <nz-modal> 标签使用时,请务必使用双向绑定,例如:[(nzVisible)]="visible"booleanfalse
    nzWidth宽度。使用数字时,默认单位为pxstringnumber520
    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内容stringTemplateRefComponentng-content-
    nzComponentParams当nzContent为组件类(Component)时,该参数中的属性将传入nzContent实例中object-
    nzIconType图标 Icon 类型。仅 确认框模式 下有效stringquestion-circle

    注意

    <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宽度stringnumber416
    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

    全局配置

    全局配置(NZ_MODAL_CONFIG)如果要进行全局默认配置,你可以设置提供商 NZ_MODAL_CONFIG 的值来实现。(如:在你的模块的providers中加入 { provide: NZ_MODAL_CONFIG, useValue: { nzMask: false }}NZ_MODAL_CONFIG 可以从 ng-zorro-antd 中导入)

    全局配置,组件默认值,组件层级配置之间的权重如下:

    组件层级配置 > 全局配置 > 组件默认值

    当前支持的全局配置

    1. {
    2. provide: NZ_MODAL_CONFIG,
    3. useValue: {
    4. nzMask?: boolean; // 是否展示遮罩
    5. nzMaskClosable?: boolean; // 点击蒙层是否允许关闭
    6. }
    7. }

    注:全局配置并无默认值,因为nzMask和nzMaskClosable默认值存在于组件中

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

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