本文共 1604 字，大约阅读时间需要 5 分钟。

前言

要实现一个页面弹出另一个页面我们需要用到modal，参考资料：https://ionicframework.com/docs/api/modal

下面我们用实际案例来验证这个功能

准备

新建modal页面

ionic g page modal

新建login组件

ionic g component modal/components/login

在tab1页面新建按钮链接到modal

   
        跳转到模态对话框页面
   

login组件页面如下

login.component.html：

     
        
     
      用户登录
       
    
   
       
             
               
      
       用户名
                
              
             
               
      
       密  码
                
              
         
        
    
             登录    
    
   

实现一个页面弹出另一个页面

modal页面新建按钮并添加click事件

modal.page.html

   
        弹出模态对话框
   

modal.module.ts引入声明login组件

在modal.module.ts中引入LoginComponent，并在declarations和entryComponents中声明LoginComponent

在modal.module.ts：

modal.page.ts中引入声明ModalController和LoginComponent

modal.module.ts：

ts中创建click事件方法

点击事件方法实现弹出login组件页面，并且传入aid参数数据

modal.page.ts

async showModel() {
     const modal = await this.modalController.create({
       component: LoginComponent,    cssClass: 'my-custom-class',    componentProps: {
         aid:123    }  });  await modal.present();}

实现从modal传递参数到弹出login页面

父页面传递参数给子页面

modal的弹出页面方法中给子页面配置传递的参数

modal.page.ts：

子页面打印传入的参数

子页面打印父页面传递的参数需要用达到NavParams，所以我们需要

• 引入NavParams组件
• 在构造函数中注入NavParams
• 日志打印日志参数
  login.component.ts：
  
  从父页面点击按钮弹出子页面后，日志打印如下：
  

子页面关闭

在login页面中新建关闭按钮

login.component.html：

ts页面创建关闭方法

子页面关闭需要用到this.navParams.data.modal.dismiss

login.component.ts：

doClose() {
       this.navParams.data.modal.dismiss();  }

点击页面后子页面关闭并回到modal页面

子页面传递参数到父页面

子页面的dismiss中传递参数

login.component.ts：

父页面答应传递过来的参数

modal.page.ts：

当子页面关闭时，后台打印传递过来的信息 代码参见：https://download.csdn.net/download/u010574271/18281129

转载地址：https://blog.csdn.net/u010574271/article/details/116309680 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！