IONIC4 使用自定义弹出框 -ModalController

痛定思痛。 2023-07-02 10:25 13阅读 0赞

# 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][https_ionicframework.com_docs_api_modal]

[https_ionicframework.com_docs_api_modal]: https://links.jianshu.com/go?to=https%3A%2F%2Fionicframework.com%2Fdocs%2Fapi%2Fmodal