IONIC4 使用自定义弹出框 -ModalController

1. 使用

1.在使用的界面引入
import { ModalController } from '@ionic/angular'；
2.在使用的界面的 .module.ts 引入要弹出的界面，并添加到 declarations 数组中, 在 @NgModule中
增加 entryComponents 属性，把要弹出的界面添加到 entryComponents 中

例如：

 

import { PicturepreviewPage } from '../viewmodels/picturepreview.page';
 const routes: Routes = [
   {
    path: '',
    component: WorkorderPage
   }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    SignaturePadModule,
    RouterModule.forChild(routes)
  ],
  declarations: [WorkorderPage,PicturepreviewPage],
  entryComponents: [PicturepreviewPage]
})
export class WorkorderPageModule {}

我引入一个 PicturepreviewPage page 在 declarations 中和 entryComponents 中声明该page

1. 在需要弹出模态框的界面同样引入该 page
   调用 ModalController 的 create方法
   其中介绍三个重要参数：
   1：component 为要弹出的组件，值为你引入的这个page
   2：componentProps为要传递过去的参数，值任意
   3： cssClass 为样式，例如设置透明度等

例子：

 

async showConditions() {
 let modal = await this.modalController.create({
   component: ConditionsPage,
   mode: "md",
   componentProps: {
     "imgs": this.imgs,
     "flag": false
   },
   cssClass: "conditions"
 });
 modal.present();

 //模态框被关闭后回回调该方法 res 为返回值
 modal.onDidDismiss().then(res => {
   console.log(res);
 })

}

1. 关闭模态框
   例如点击确认后，获取模态框传回的值

 

    this.modalController.getTop().then(event => {
      event.dismiss({
        test:"11"
      },"test");
    })

//源码查看
    'dismiss': (data?: any, role?: string | undefined) => Promise<boolean>;

data 为传递回去的参数，role为 角色
官网地址：https://ionicframework.com/docs/api/modal