ionic4模态对话框Modal以及Modal和组件之间传值

Ionic Modal模态对话框主要用于登录注册页面，我们可以把它理解为从页面底部弹出的另一个页面。下面我们看看ionic4模态对话框Modal的使用，以及ionic4模态对话框Modal和组件之间传值。

ionic4.x Modal官方文档：https://ionicframework.com/docs/api/modal

1、我们在一个页面通过modal打开另一个页面

首先我们打开控制创建一个页面，以及创建一个组件，通过 ionic g page modal创建一个页面，然后通过ionic g component modal/components/login创建一个login组件。接下来我们在modal页面打开login组件

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

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

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

2、在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();
  }
}

上面代码我们就可以实现在modal页面打开login组件

2、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': '消失的时候返回的内容'
    });
  }


}

3、弹出的组件关闭的时候给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': '消失的时候返回的内容'
    });
  }


}