Ionic4.x Modal模态对话框以及 Modal 传值

1、Modal 模态对话框简介

官方文档:https://ionicframework.com/docs/api/modal

Modal模态对话框主要用于登录注册页面，我们可以把它理解为从页面底部弹出的另一个页 面。

 

2、Modal 模态对话框使用

比如我们想在 modal 页面中弹出另一个页面

 

1、新建一个 model 页面以及在 model 页面下面新建一个组件。

 

ng generate  page model
ng generate component model/components/login

 

2、在 model 页面所在的模块中引入刚才创建的 login 组件，并声明

 

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

 

NgModule({
  imports: [
CommonModule,
FormsModule,
IonicModule, RouterModule.forChild(routes)
],
declarations: [ModelPage,LoginComponent], entryComponents: [LoginComponent]
})

3、在modal页面中引入刚才创建的login组件，并且引入ModalController 弹出模态对话框， 代码如下:

 

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { LoginComponent } from '../components/login/login.component'; @Component({
selector: 'app-modal', templateUrl: './modal.page.html', styleUrls: ['./modal.page.scss'],
})
export class ModalPage implements OnInit {
constructor(public modalController: ModalController) {} ngOnInit() {
}
async presentModal() {
const modal = await this.modalController.create({ showBackdrop:true,
component: LoginComponent, componentProps: { value: 123 }
});
return await modal.present(); }
}

 

3、Modal 页面给弹出的组件传值

 

1、modal 页面在 componentProps 中给弹出的组件页面传值

 

const modal = await this.modalController.create({ showBackdrop:true,
component: LoginComponent,
componentProps: { value: 123 } });
return await modal.present();

 

2、弹出的组件页面通过 NavParams 接受 modal 页面的传值

 

import { Component, OnInit,Input } from '@angular/core'; import { NavParams } from '@ionic/angular'; @Component({
selector: 'app-login',
templateUrl: './login.component.html', styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {
@Input() aid: any;
constructor(public navParams: NavParams) {
// componentProps can also be accessed at construction time using NavParamsns
console.log(this.navParams); }
ngOnInit() {
} closeModel(){
this.navParams.data.modal.dismiss({ 'result': '消失的时候返回的内容'
}); }
}

 

4、弹出的组件关闭的时候给 modal 页面传 值

1、modal 监听关闭事件

async showModel(){
const modal = await this.modalController.create({
component: LoginComponent,
componentProps: { aid: '123' } });
await modal.present();
//监听销毁的事件
const { data } = await modal.onDidDismiss(); console.log(data);
}

2、Login 组件关闭的时候传入数据

 

closeModel(){ this.navParams.data.modal.dismiss({
'result': '消失的时候返回的内容' });
}

 

Login 组件完整代码:

import { Component, OnInit,Input } from '@angular/core'; import { NavParams } from '@ionic/angular'; @Component({
selector: 'app-login',
templateUrl: './login.component.html', styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {
@Input() aid: any;
constructor(public navParams: NavParams) {
// componentProps can also be accessed at construction time using NavParamsns
console.log(this.navParams); }
ngOnInit() {
} closeModel(){
this.navParams.data.modal.dismiss({ 'result': '消失的时候返回的内容'
}); }
}