ionic5.x扩展的Modal以及Modal传值

1、给模态框创建一个自定义的组件

 ionic g component component/modal

image.png

• my-page.module.ts文件代码：
  在这个文件中记得需要在entryComponents里面去加入模态框的组件，不仅仅只是声明部分

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { MyPagePageRoutingModule } from './my-page-routing.module';

import { MyPagePage } from './my-page.page';

// 引入模态框组件
import { ModalComponent } from "./component/modal/modal.component"

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    MyPagePageRoutingModule
  ],
  declarations: [MyPagePage,ModalComponent],
  entryComponents:[ModalComponent]
})
export class MyPagePageModule {}

• my-page.page.html页面的代码部分：
  通过showModal()事件去控制模态框的打开

<ion-header style="display: flex;">
  <ion-buttons style="border-bottom: 1px solid #ccc">
    <ion-back-button text="返回"></ion-back-button>
  </ion-buttons>
  <ion-toolbar>
    <ion-title>tab</ion-title>
  </ion-toolbar>
</ion-header>

<ion-button style="width: 300px;margin: auto;margin-top: 10px;" (click)="showModal()">
  <ion-icon name="open-outline"></ion-icon>
  弹出对话框
</ion-button>

• showModal()方法：
  showModal主要是创建一个模态框，但是在创建之前需要引入@ionic/angular中的NavParams

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalComponent } from './component/modal/modal.component';

@Component({
  selector: 'app-my-page',
  templateUrl: './my-page.page.html',
  styleUrls: ['./my-page.page.scss'],
})
export class MyPagePage implements OnInit {
  
  constructor(public modalController: ModalController) { }

  ngOnInit() {
  }

  async showModal() {
    const modal = await this.modalController.create({
      component: ModalComponent,
      cssClass: 'my-custom-class',
      componentProps:{ name:'zhangsan', aid:'10001'}
    });
    return await modal.present();
  }

}

2、模态框Modal传值

上述代码中的componentProps:{ name:'zhangsan', aid:'10001'}就是给模态框传的值，这个地方必须是以对象的形式传。

• modal.html模态框页面布局代码：

<div style="position:relative;width: 100%;height: 100%;">
  <ion-item-divider style="height: 50px;position: absolute;top: 0;left: 0;right: 0;">
    <ion-label>
      请选择认证方式:
    </ion-label>
  </ion-item-divider>

  <ion-card style="position: absolute;top: 50px;left: 0;width: 200px;">
    <ion-card-header style="text-align: center;font-size: 26px;">
      <ion-icon name="finger-print-outline"></ion-icon>
    </ion-card-header>
    <ion-card-content style="text-align: center;">
      指纹识别
    </ion-card-content>
  </ion-card>

  <ion-card style="position: absolute;top: 50px;left: 250px;width: 200px;">
    <ion-card-header style="text-align: center;font-size: 26px;">
      <ion-icon name="person-add-outline"></ion-icon>
    </ion-card-header>
    <ion-card-content style="text-align: center;">
      账号密码登录
    </ion-card-content>
  </ion-card>


  <ion-button class="btn" style="position: absolute;bottom: 0;left: 0;;margin: 0;width: 30%;" (click)="handleClose()">
    取消
  </ion-button>
  <ion-button class="btn" style="position: absolute;bottom: 0;right: 0;margin: 0;width: 30%;" (click)="handleDetermine()">
    确定
  </ion-button>
</div>

• modal.component.ts去接收外面传过来的数据：
  这个地方和Angular中的父子组件传值不太一样，在这中需要通过NavParams去接收

import { Component, OnInit } from '@angular/core';
import { NavParams } from "@ionic/angular"

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss'],
})
export class ModalComponent implements OnInit {

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

  ngOnInit() {}

  handleClose() {
    this.NavParams.data.modal.dismiss();
  }

}

关闭弹窗的话也是可以直接使用this.NavParams.data.modal.dismiss()去关闭弹窗。

image.png