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
- 在需要弹出模态框的界面同样引入该 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);
})
}
- 关闭模态框
例如点击确认后，获取模态框传回的值
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
