Modal对话框

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

基本用法

最简单的用法。

警告弹窗

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

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

操作弹窗

操作对话框。

API

Modal

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

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

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

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

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

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

相关的类型定义

ModalService其他的方法/属性

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