ionic模态组件Model的传值

1. 创建界面

使用cmd命令新建一个model页面

ionic g page mine

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

ionic g component model/components/login

生成结构如下

---

2. 在模块中引入组件并声明

在model页面所在的模块mine.module.ts中引入刚才创建的Login组件

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

并声明

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    MinePageRoutingModule
  ],
  //declarations 和 entryComponents两处声明
  declarations: [MinePage,LoginComponent],
  entryComponents:[LoginComponent]
})

---

3. 在界面中引入组件并声明

在model页面mine.page.ts中引入刚才创建的Login组件和ModalController

import { ModalController } from '@ionic/angular';
import { LoginComponent } from './components/login/login.component';

声明ModalController

constructor(public modalController:ModalController) { }

4. 创建Model页面跳转按钮

在mine.page.html界面中增加跳转按钮

<ion-button color="primary" (click)="showLogin()"> 登录 </ion-button>

5. Login组件页面布局

在login.component.html界面中完善页面布局，并增加关闭组件按钮

<ion-header>
  <ion-toolbar>
    <ion-title>Login</ion-title>
    <ion-buttons slot="end">
      <!-- 销毁事件 -->
      <ion-button (click)="closeLogin()">
        <ion-icon slot="icon-only" name="close"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>


<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>用户名:</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>密 码:</ion-label>
      <ion-input ></ion-input>
    </ion-item>
    <ion-button color="primary" (click)="doLogin()"> 登录 </ion-button>
  </ion-list>
</ion-content>

6. Model界面绑定显示事件并监听返回数据

在model页面mine.page.ts中创建显示组件并传值的方法，并监听关闭组件时的返回数据

async showLogin(){
    const modal = await this.modalController.create({
      showBackdrop:true,
      component:LoginComponent,
      //Model界面给弹出的组件传值
      componentProps:{value:123}
    });
    await modal.present();
    //监听关闭组件获取返回值的方法
    const data = await modal.onDidDismiss();
    console.log(data);
  }

7. Login组件接收Modal传值并绑定销毁事件

弹出的组件界面通过NavParams接收modal页面的传值

首先引入NavParams

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

声明NavParams

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

绑定销毁传值事件

closeLogin(){
    this.navParams.data.modal.dismiss({
      //销毁时返回的数据
      'result':'close'
    })
}