Modal对话框

用作显示系统的重要信息，并请求用户进行操作反馈，eg：删除某个重要内容时，弹出 Modal 进行二次确认。

规则

  • 尽可能少用。Modal 会打断用户操作，只用在重要的时候。
  • 标题应该简明，不能超过 1 行；描述内容应该简明、完整，一般不多于 2 行。
  • 操作按钮最多到 3 个（竖排），一般为 1-2 个（横排）；3 个以上建议使用组件 ActionSheet 来完成。
  • 一般将用户最可能点击的按钮，放在右侧。另外，取消按钮应当始终放在左侧。

代码演示

基本用法

最简单的用法。

  1. import { Component } from '@angular/core';
  2. import { ModalService } from 'ng-zorro-antd-mobile';
  4. @Component({
  5.   selector: 'demo-modal-basic',
  6.   template: `
  7.     <WingBlank>
  8.       <WhiteSpace></WhiteSpace>
  9.       <div Button (onClick)="showModal('modal1')">text only</div>
  10.       <WhiteSpace></WhiteSpace>
  11.       <Modal [(ngModel)]="this.state.modal1" [transparent]="true" [title]="'Title'" [footer]="footer">
  12.         <div [ngStyle]="{ height: 100, overflow: 'scroll' }">
  13.           scoll content... <br />
  14.           scoll content... <br />
  15.           scoll content... <br />
  16.           scoll content... <br />
  17.           scoll content... <br />
  18.           scoll content... <br />
  19.         </div>
  20.       </Modal>
  21.       <div Button (onClick)="showModal('modal2')">popup</div>
  22.       <WhiteSpace></WhiteSpace>
  23.       <Modal [(ngModel)]="this.state.modal2" [popup]="true" [animationType]="'slide-up'" (onClose)="onClose('modal2')">
  24.         <List [renderHeader]="renderHeader" [className]="'popup-list'">
  25.           <ListItem>股票名称</ListItem>
  26.           <ListItem>股票代码</ListItem>
  27.           <ListItem>买入价格</ListItem>
  28.           <ListItem> <div Button [type]="'primary'" (onClick)="onClose('modal2')">买入</div> </ListItem>
  29.         </List>
  30.       </Modal>
  31.       <div Button (onClick)="showModal('modal3')">maskClosable</div>
  32.       <WhiteSpace></WhiteSpace>
  33.       <Modal
  34.         [(ngModel)]="this.state.modal3"
  35.         [transparent]="true"
  36.         [title]="'Title'"
  37.         [maskClosable]="true"
  38.         (onClose)="onClose('modal3')"
  39.       >
  40.         <div [ngStyle]="{ height: 100, overflow: 'scroll' }">
  41.           scoll content... <br />
  42.           scoll content... <br />
  43.           scoll content... <br />
  44.         </div>
  45.       </Modal>
  46.       <div Button (onClick)="showModal('modal4')">closable</div>
  47.       <WhiteSpace></WhiteSpace>
  48.       <Modal
  49.         [(ngModel)]="this.state.modal4"
  50.         [transparent]="true"
  51.         [title]="'Title'"
  52.         [closable]="true"
  53.         (onClose)="onClose('modal4')"
  54.       >
  55.         <div [ngStyle]="{ height: 100, overflow: 'scroll' }">
  56.           scoll content... <br />
  57.           scoll content... <br />
  58.           scoll content... <br />
  59.         </div>
  60.       </Modal>
  61.     </WingBlank>
  62.   `,
  63.   styles: [
  64.     `
  65.       .popup-list .am-list-body {
  66.         height: 210px;
  67.         overflow: auto;
  68.       }
  69.     `
  70.   ]
  71. })
  72. export class DemoModalBasicComponent {
  73.   state = {
  74.     modal1: false,
  75.     modal2: false,
  76.     modal3: false,
  77.     modal4: false
  78.   };
  79.   footer = [
  80.     {
  81.       text: 'Ok',
  82.       onPress: () => {
  83.         console.log('ok');
  84.         this.onClose('modal1');
  85.       }
  86.     }
  87.   ];
  88.   footer2 = [
  89.     {
  90.       text: 'Ok',
  91.       onPress: () => {
  92.         console.log('ok');
  93.         this.onClose('modal2');
  94.       }
  95.     }
  96.   ];
  98.   constructor() {}
  100.   modelChange(event) {
  101.     console.log('asdfasdf', event);
  102.   }
  103.   onClose(key) {
  104.     this.state[key] = false;
  105.   }
  107.   showModal(key) {
  108.     this.state[key] = true;
  109.   }
  111.   renderHeader() {
  112.     return '委托买入';
  113.   }
  114. }

警告弹窗

包含无按钮, 确认框, 多按钮情况。

  1. import { Component } from '@angular/core';
  2. import { ModalService, ToastService, ModalRef } from 'ng-zorro-antd-mobile';
  4. @Component({
  5.   selector: 'demo-modal-alert',
  6.   template: `
  7.     <WingBlank>
  8.       <WhiteSpace></WhiteSpace>
  9.       <div Button (onClick)="showAlert()">customized buttons</div>
  10.       <WhiteSpace></WhiteSpace>
  11.       <div Button (onClick)="showAlertMuchButtons(message)">More than two buttons</div>
  12.       <WhiteSpace></WhiteSpace>
  14.       <ng-template #message>
  15.         <div>More than two buttons</div>
  16.       </ng-template>
  18.       <div Button (onClick)="showPromise()">promise</div>
  19.       <WhiteSpace></WhiteSpace>
  20.     </WingBlank>
  21.   `
  22. })
  23. export class DemoModalAlertComponent {
  24.   constructor(private _modal: ModalService, private _toast: ToastService) {}
  26.   showAlert() {
  27.     this._modal.alert('Delete', 'Are you sure ?', [
  28.       { text: 'Cancel', onPress: () => console.log('cancel') },
  29.       { text: 'OK', onPress: () => console.log('ok') }
  30.     ]);
  31.   }
  33.   showAlertMuchButtons(message) {
  34.     this._modal.alert('Much Buttons', message, [
  35.       { text: 'Button1', onPress: () => console.log('第0个按钮被点击了') },
  36.       { text: 'Button2', onPress: () => console.log('第1个按钮被点击了') },
  37.       { text: 'Button2', onPress: () => console.log('第2个按钮被点击了') }
  38.     ]);
  39.   }
  41.   showPromise() {
  42.     this._modal.alert('Delete', 'Are you sure???', [
  43.       { text: 'Cancel', onPress: () => console.log('cancel') },
  44.       {
  45.         text: 'Ok',
  46.         onPress: () =>
  47.           new Promise(resolve => {
  48.             this._toast.info('onPress Promise', 1000);
  49.             setTimeout(resolve, 1000);
  50.           }),
  51.         style: {
  52.           color: '#ffffff',
  53.           background: '#00ff00'
  54.         }
  55.       }
  56.     ]);
  57.   }
  58. }

输入弹窗

包含输入普通文字, 密码, 登录信息样式。

  1. import { Component } from '@angular/core';
  2. import { ModalService, ToastService } from 'ng-zorro-antd-mobile';
  4. @Component({
  5.   selector: 'demo-modal-prompt',
  6.   template: `
  7.     <WingBlank>
  8.       <WhiteSpace></WhiteSpace>
  9.       <div Button (onClick)="showPromptPromise()">promise</div>
  10.       <WhiteSpace></WhiteSpace>
  11.       <div Button (onClick)="showPromptDefault()">defaultValue</div>
  12.       <WhiteSpace></WhiteSpace>
  13.       <div Button (onClick)="showSecure()">secure-text</div>
  14.       <WhiteSpace></WhiteSpace>
  15.       <div Button (onClick)="showCustom()">custom buttons</div>
  16.       <WhiteSpace></WhiteSpace>
  17.       <div Button (onClick)="showLogin()">login-password</div>
  18.       <WhiteSpace></WhiteSpace>
  19.     </WingBlank>
  20.   `
  21. })
  22. export class DemoModalPromptComponent {
  23.   constructor(private _modal: ModalService, private _toast: ToastService) {}
  25.   showPromptPromise() {
  26.     this._modal.prompt(
  27.       'input name',
  28.       'please input your name',
  29.       [
  30.         {
  31.           text: 'Close',
  32.           onPress: value =>
  33.             new Promise(resolve => {
  34.               this._toast.info('onPress promise resolve', 1000);
  35.               setTimeout(() => {
  36.                 resolve();
  37.                 console.log(`value:${value}`);
  38.               }, 1000);
  39.             })
  40.         },
  41.         {
  42.           text: 'Hold on',
  43.           onPress: value =>
  44.             new Promise((resolve, reject) => {
  45.               this._toast.info('onPress promise reject', 1000);
  46.               setTimeout(() => {
  47.                 // reject();
  48.                 console.log(`value:${value}`);
  49.               }, 1000);
  50.             })
  51.         }
  52.       ],
  53.       'default',
  54.       null,
  55.       ['input your name']
  56.     );
  57.   }
  59.   showPromptDefault() {
  60.     this._modal.prompt(
  61.       'defaultValue',
  62.       'defaultValue for prompt',
  63.       [{ text: 'Cancel' }, { text: 'Submit', onPress: value => console.log(`输入的内容:${value}`) }],
  64.       'default',
  65.       ['100']
  66.     );
  67.   }
  69.   showSecure() {
  70.     this._modal.prompt('Password', 'Password Message', password => console.log(`password: ${password}`), 'secure-text');
  71.   }
  73.   showCustom() {
  74.     this._modal.prompt(
  75.       'Password',
  76.       'You can custom buttons',
  77.       [{ text: '取消' }, { text: '提交', onPress: password => console.log(`密码为:${password}`) }],
  78.       'secure-text'
  79.     );
  80.   }
  82.   showLogin() {
  83.     this._modal.prompt(
  84.       'Login',
  85.       'Please input login information',
  86.       (login, password) => console.log(`login: ${login}, password: ${password}`),
  87.       'login-password',
  88.       ['default', '123456'],
  89.       ['Please input name', 'Please input password']
  90.     );
  91.   }
  92. }

操作弹窗

操作对话框。

  1. import { Component } from '@angular/core';
  2. import { ModalService } from 'ng-zorro-antd-mobile';
  4. @Component({
  5.   selector: 'demo-modal-operation',
  6.   template: `
  7.     <WingBlank>
  8.       <WhiteSpace></WhiteSpace>
  9.       <div Button (onClick)="showOpeartion()">operation</div>
  10.       <WhiteSpace></WhiteSpace>
  11.     </WingBlank>
  12.   `
  13. })
  14. export class DemoModalOperationComponent {
  15.   constructor(private _modal: ModalService) {}
  17.   showOpeartion() {
  18.     this._modal.operation([
  19.       { text: '标为未读', onPress: () => console.log('标为未读被点击了') },
  20.       { text: '置顶聊天', onPress: () => console.log('置顶聊天被点击了') }
  21.     ]);
  22.   }
  23. }

Modal对话框 - 图1

API

Modal

参数说明类型默认值
[ngModel]对话框是否可见booleanfalse
[closable]是否显示关闭按钮booleanfalse
[maskClosable]点击蒙层是否允许关闭booleantrue
[transparent]是否背景透明booleanfalse
[popup]是否弹窗模式booleanfalse
[animationType]动画类型‘slide-down’ | ‘slide-up’ | ‘fade’ | ‘slide’‘fade’
[title]标题TemplateRef-
[footer]底部内容Array<text: string, onPress: Function>[]
[platform]设定组件的平台特有样式, 仅限web‘android’ | ‘ios’‘ios’
(onClose)点击 x 或 mask 回调EventEmitter<void>-

ModalSerivce.alert(title, message, actions?, platform?)

参数说明类型默认值
[title]标题string | TemplateRef-
[message]提示信息string | TemplateRef-
[actions]按钮组Array<text: string, onPress: Function, style: object>-
[platform]设定组件的平台特有样式, 仅限web‘android’ | ‘ios’‘ios’

ModalSerivce.alert(title, message, actions?, platform?).close() 可以在外部关闭 Alert

ModalSerivce.prompt(title, message, callbackOrActions, type?, defaultValue?, placeholders?, platform?)

参数说明类型默认值
[title]标题string | TemplateRef-
[message]提示信息string | TemplateRef-
[callbackOrActions]按钮组或回调函数Array<text: string, onPress: Function> | Function-
[type]prompt 的样式‘default’ | ‘secure-text’ | ‘login-password’‘default’
[defaultValue]defaultValuestring[]-
[placeholders]placeholdersstring[]-
[platform]设定组件的平台特有样式, 仅限web‘android’ | ‘ios’‘ios’

ModalSerivce.prompt(title, message, callbackOrActions, type?, defaultValue?, placeholders?, platform?).close() 可以在外部关闭 prompt`

ModalSerivce.operation(actions?, platform?)

参数说明类型默认值
[actions]按钮组Array<text: string, onPress: Function, style: object>-
[platform]设定组件的平台特有样式, 仅限web‘android’ | ‘ios’‘ios’

ModalSerivce.operation(actions?, platform?).close() 可以在外部关闭 operation`

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

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

相关的类型定义

ModalService其他的方法/属性

方法/属性描述类型
openModals打开状态的Modal集合ModalRef[]
afterAllClose所有的Modals关闭后的回调Observable&lt;void&gt;
closeAll()关闭所有的ModalsFunction

ModalRef

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

通过服务方式 ModalService.xxx() 创建的对话框，都会返回一个 ModalRef 对象，该对象具有以下方法：

方法/参数说明
afterOpen同afterOpen，但类型为Observable<void>
afterClose同afterClose，但类型为Observable<result:any>
close(result: any) => void关闭(隐藏)对话框。注：当用于以服务方式创建的对话框，此方法将直接 销毁 对话框（同destroy方法）
destroy(result: any) => void销毁对话框。注：仅用于服务方式创建的对话框（非服务方式创建的对话框，此方法只会隐藏对话框）
getContentComponent() => Component获取对话框内容中Content的Component实例instance。注：当对话框还未初始化完毕（ngOnInit未执行）时，此函数将返回undefined
triggerOk() => void手动触发onClose
triggerCancel() => void手动触发cancel