Ionic 模态窗口概述
Ionic 模态窗口是一种覆盖在页面顶部的临时视图，常用于显示额外内容或执行特定操作（如表单提交、确认对话框等）。模态窗口通过 ModalController 创建和管理，支持自定义动画、样式和交互逻辑。
创建基本模态窗口
生成模态组件 使用 Ionic CLI 快速生成模态组件：
ionic generate component components/my-modal
定义模态内容 在 my-modal.component.html 中编写模态内容模板：
<ion-header>
<ion-toolbar>
<ion-title>示例模态</ion-title>
<ion-buttons slot="end">
<ion-button (click)="dismiss()">关闭</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label>输入内容</ion-label>
<ion-input [(ngModel)]="data"></ion-input>
</ion-item>
<ion-button expand="block" (click)="submit()">提交</ion-button>
</ion-content>
实现模态逻辑 在 my-modal.component.ts 中处理关闭和提交逻辑：
import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
@Component({
selector: 'app-my-modal',
templateUrl: './my-modal.component.html',
})
export class MyModalComponent {
data: string = '';
constructor(private modalCtrl: ModalController) {}
dismiss() {
this.modalCtrl.dismiss();
}
submit() {
this.modalCtrl.dismiss({ submittedData: this.data });
}
}
调用模态窗口
在父页面中通过 ModalController 打开模态并接收返回值：
import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { MyModalComponent } from '../components/my-modal/my-modal.component';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
})
export class HomePage {
constructor(private modalCtrl: ModalController) {}
async openModal() {
const modal = await this.modalCtrl.create({
component: MyModalComponent,
componentProps: {
initialData: '预设值' // 可选参数传递
}
});
modal.onDidDismiss().then((result) => {
if (result.data) {
console.log('返回数据:', result.data.submittedData);
}
});
await modal.present();
}
}
自定义模态样式与动画
全局样式覆盖 在 global.scss 中修改模态背景透明度：
ion-modal {
–background: rgba(0, 0, 0, 0.5);
}
自定义动画 通过 enterAnimation 和 leaveAnimation 指定动画：
const modal = await this.modalCtrl.create({
component: MyModalComponent,
enterAnimation: myEnterAnimation,
leaveAnimation: myLeaveAnimation
});
动画定义示例（需导入 AnimationBuilder）：
const myEnterAnimation = (baseEl: HTMLElement) => {
const root = baseEl.shadowRoot;
const backdropAnimation = createAnimation()
.addElement(root.querySelector('ion-backdrop')!)
.fromTo('opacity', '0.01', '0.4');
const wrapperAnimation = createAnimation()
.addElement(root.querySelector('.modal-wrapper')!)
.fromTo('transform', 'translateY(100%)', 'translateY(0)');
return createAnimation()
.addElement(baseEl)
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.duration(500)
.addAnimation([backdropAnimation, wrapperAnimation]);
};
高级功能：嵌套模态与参数传递
嵌套模态 在模态中再次调用其他模态：
async openSecondModal() {
const modal = await this.modalCtrl.create({
component: SecondModalComponent
});
await modal.present();
}
参数传递与接收 父组件传递参数：
const modal = await this.modalCtrl.create({
component: MyModalComponent,
componentProps: {
userId: 123,
title: '编辑资料'
}
});
模态组件接收参数：
@Input() userId: number;
@Input() title: string;
注意事项
- 内存管理：确保模态关闭后释放资源，避免内存泄漏。
- 响应式设计：通过 CSS 媒体查询适配不同屏幕尺寸。
- 无障碍性：为模态添加 aria-label 和焦点管理。
通过上述方法，可以灵活实现复杂模态交互场景。完整示例参考 Ionic 官方文档。
