在实际开发中会遇到父页面跳转子页面进行数据的筛选，然后将筛选过后的数据回传到父页面这种业务 这里使用ionic4的ModalController 来实现
1、添加父页面
我这里是 ionic g page pages/HDReport
2、添加子页面
我这里是 ionic g page pages/UserList

一、父页面

1、HDReport.page.html

先定义一个button

      <ion-button (click)="presentFilter()">
         <ion-icon slot="icon-only" name="options"></ion-icon>
      </ion-button>

2 HDReport.page. ts

import { ModalController } from '@ionic/angular';
import { UserListPage } from '../user-list/user-list.page';

  async presentFilter() {
    const modal = await this.mdalController.create({
      component: UserListPage,
      componentProps: { excludedTracks: this.excludeTracks }
    });
    await modal.present();

    const { data } = await modal.onWillDismiss();
    if (data) {
      this.excludeTracks = data;
      // this.updateSchedule();
    }
  }

3 HDReport.page.module.ts

这里需要在module.ts中的@NgModule中做如下修改

declarations:[
    ....
    UserListPage // 这里加入你的页面引用 我这里是UserListPage
  ],
  entryComponents: [ // 这里要加入 entryComponents
    UserListPage // 依然要加入你的子页面
  ]

二、子页面

1 UserList.Page.html

这里也定义一个button具体的条件或者数据筛选我就不写了

    <ion-buttons slot="end">
      <ion-button (click)="applyFilters()">确认</ion-button>
    </ion-buttons>

2 UserList.Page.ts

//这里依然要引入ModalController
import { ModalController } from '@ionic/angular';

  applyFilters() {
    // 这里的data是要回传到父页面的数据
    this.dismiss(data);
  }

  dismiss(data?: any) {
    // 使用注入的ModalController页
    this.modalController.dismiss(data);
  }

3 重点

这里要删除子页面的 UserList.Page.module.ts文件 否则会报错

4 最终效果

1.png 2.png