Ionic Frameworkで↓のようなStackingModalを実装する機会があり、備忘録として実装方法を書いていきます。
StackingModalではモーダルを複数積み重ねていくことが可能で、スワイプでモーダルを閉じることができます。
- version
- Angular 11.2.6
- ionic/angular 5.3.3
ion-modalでモーダルを作成し、モーダルにPropsを渡す
ionic/angular
のModalControllerとIonRouterOutletを利用してモーダルを作成します。
swipeToClose
プロパティにtrue
を指定することで、スワイプでのクローズを可能にします。
presentingElement
プロパティにthis.routerOutlet.nativeEl
を渡すことで、StackingModalになります。
モーダルにPropsを渡したい場合、componentProps
から渡すことが可能です。
※StackingModalはiOSのみで有効です。
import {
IonRouterOutlet,
ModalController
} from "@ionic/angular";
...
export class SampleComponent implements OnInit {
constructor(
private modalCtrl: ModalController,
private routerOutlet: IonRouterOutlet
) {}
/**
* モーダルの作成と表示
*/
async presentModal(): Promise<void> {
const modal = await this.modalCtrl.create({
component: SampleModal,
cssClass: "sample-modal",
swipeToClose: true,
presentingElement: this.routerOutlet.nativeEl,
id: "SampleModal",
componentProps: {
sampleProps: "sample",
sampleProps2: "sample2",
.....
}
});
await modal.present();
}
親Componentから渡ってきた componentProps
をモーダル側で取得する
モーダル側でcomponentProps
で渡ってきた値を取得する際は、@Input
を使用します。
モーダルを閉じたい場合、dismiss()
を使用します。
親ComponentにOutputしたいデータがある場合、dismiss()
の第一引数に指定することで、親Componentに渡すことが可能です。
...
export class SampleModal implements OnInit {
constructor(private modalCtrl: ModalController) {}
@Input()
sampleProps: string;
@Input()
sampleProps2: string;
// 親Componentに渡したいデータ
sampleData = { dismissed: true }
// モーダルをCloseする
dismiss() {
this.modalCtrl.dismiss(this.sampleData, null, "SampleModal").then();
}
}
親Componentでモーダルから渡ってきたデータを取得
onWillDismiss
またはonDidDismiss
を使用して、モーダルから渡ってきたデータを取得します。
onWillDismiss
はモーダルが閉じる前にEmitされ、onDidDismiss
はモーダルが閉じた後にEmitされます。
...
async presentModal(): Promise<void> {
const modal = await this.modalCtrl.create({
component: SampleModal,
cssClass: "sample-modal",
swipeToClose: true,
presentingElement: this.routerOutlet.nativeEl,
id: "SampleModal",
componentProps: {
sampleProps: "sample",
sampleProps2: "sample2",
.....
}
});
await modal.present();
// Modalから渡ってきたデータを取得
const { data } = await modal.onDidDismiss();
console.log(data);
}
以上、AngularとIonicを使用した、StackingModalの実装例でした。