ionic4中模态对话框以及组件之间的传值

模态对话框（Modal Dialogue Box），详解请看博客——模态弹框和非模态弹框

    移动端开发的时候通常会遇到一个界面弹出另一个界面的情况，用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应，例如我们退出系统、挂失卡时通常会提醒“确定要怎样怎样？” 此时我们必须对弹框进行操作，才能执行下一步程序。例如我们点击注册按钮，此时会弹出一个注册的界面，此时他们在注册页面进行一些列的操作，然后将值传递给最开始的界面。

第一步，例如我们在page1页面下建立一个注册的组件

创建page1界面

ionic g page page1

在page1下面创建register组件

ionic g component page1/register

 如下图所示：

第二步

 我们在page1界面使用register组件，就必须先引用并且声明该组件

 在page.ts界面引入模态组件以及注册组件

 第三步，

直接在page.html界面调用即可

 效果如下：我们发现在page1界面打开注册界面，地址栏里面的路径并没有发生改变。

组件之间的传值问题

一、在注册界面获取page1界面的值：

第一步，在register.components.ts中引入 b并且声明navparams

注意：关闭模态对话框直接调用dismiss()方法即可，即this.navParams.data.modal.dismiss()

效果如下：

二、注册组件页面给page1传值

第一步，在page1.page.ts中监听当前模态对画框销毁事件

 第二步、在注册组件关闭的时候，传入数据给page1

 

模态对话框处处都用哦，你会发现它的美的！