【ionic】-模态对话框及modal页面传值

最新推荐文章于 2022-05-12 15:44:48 发布

原创最新推荐文章于 2022-05-12 15:44:48 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ionic #前端框架

Ionic 专栏收录该内容

8 篇文章

订阅专栏

博客介绍了模态对话框，它是用户操作对话框外应用程序前需先响应的对话框，与非模态对话框区别在于打开时主窗体能否操作，适用于登录注册等场景。还说明了使用步骤，包括新建页面、引入组件、弹出对话框，以及页面间传值方法并展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、是什么？

模态对话框也叫模式对话框，是指用户想要对对话框以外的应用程序进行操作时，必须先对该对话框进行相应，windows应用程序中，对话框分为模态对话框和非模态对话框，二者的区别在于程序过程中，对话框打开时，能否允许用户进行其他对象的操作，简单理解为，主窗体是否能够进行操作；而模态对话框恰恰是无法进行操作的那一方；

应用场景：登录注册等具有先后次序的场景；

2、怎么用？

新建一个model页面，并在model页面下创建一个组件

ionic g component model/components/login

在model页面所在模块(module.ts)中引入刚创建的login组件并进行声明

//引入
import { LoginComponent} from './components/login/login.component';

//声明
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [ ModalPage , LoginComponent],
  entryComponents: [LoginComponent]  //必须有
})

在model页面(page.ts)中，引入创建的login组件，并且引入ModalController弹出模态对话框

//引入
import { LoginComponent} from './components/login/login.component';

//构造函数
constructor(public modalController: ModalController) {}

//方法；使用 关键字 async 来表示，在函数内部使用 await 来表示异步
async showModel() {
    const modal = await this.modalController.create({
      showBackdrop: true,
      component: LoginComponent,
      componentProps: { aid: 123, name: '二狗' }  //传值
    });
    return await modal.present();
  }

3、Model页面给弹出的组件传值，弹出组件关闭时传值

在model中page.ts中给弹出组件页面传值

async showModel(){
    const modal = await this.modalController.create({
      component: LoginComponent,
      componentProps: { aid: 123,name:'亓亓' }   //传值
    });

//监听销毁事件
     const {data} =await modal.onDidDismiss();
     console.log(data);

弹出组件Login页面引入NavParams接收modal页面传值

// 接收modal页面传过来的值
import { NavParams } from '@ionic/angular';

constructor(public navParams: NavParams) {
      console.log(this.navParams);
      console.log(this.navParams.data.aid);
  }

doClose() {
    // 关闭模态对话框
    this.navParams.data.modal.dismiss();
  }

效果展示

在这里插入图片描述