Ionic + Angular で StackingModalを実装する

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のみで有効です。

sample.component.ts

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に渡すことが可能です。

sample-modal.component.ts

...
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されます。

sample.component.ts

...
    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の実装例でした。

参考
https://ionicframework.com/docs/api/modal