ionicのモーダル画面(ion-modal)でのデータの受け渡し

はじめに

ionicのモーダル画面(ion-modal)でのデータ受け渡しの方法を紹介します。

以下の記事ではモーダル画面の作成方法とカスタマイズ方法を紹介しています。
ionicのmodalをSCSSでカスタマイズする
この記事の続きとして書いていきます。
コピペで実装できます。

モーダルへデータを渡す

今回はデータとして文字列home→modalをモーダル画面へ渡します。

/src/app/home/home.page.ts

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage} from '../modal/modal.page';
import { ActivatedRoute} from '@angular/router'; 

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private modalCtrl: ModalController,
    private activatedRoute: ActivatedRoute,
  ) {
  }
  async presentModal() {
    const modal = await this.modalCtrl.create({
      component: ModalPage,
      componentProps: { parameter: 'home→modal' }, //パラメータ
      cssClass: 'custom-modal-css'
    });
    return await modal.present();
  }
}

/src/app/modal/modal.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>モーダル
    </ion-title>
    <ion-buttons slot="end">
        <ion-button (click)="close()"><ion-icon name="close"></ion-icon></ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  {{parameter}} <!–モーダルへ渡した文字列を表示–>
</ion-content>

/src/app/modal/modal.page.ts

import { Component, OnInit } from '@angular/core';
import { ModalController, NavParams } from '@ionic/angular';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.page.html',
  styleUrls: ['./modal.page.scss'],
})
export class ModalPage implements OnInit {
  parameter: string;
  constructor(
    private modalCtrl: ModalController,
    private navParams: NavParams,
  ) { }

  ngOnInit() {
    this.parameter = this.navParams.data.parameter; //パラメータの受け取り
  }

  close() {
    this.modalCtrl.dismiss();
  }

}

ION-MODAL表示ボタンを押下すると、以下のように渡したパラメータが表示されます。

モーダルのデータを受け取る

モーダルから文字列modal→homeを受け取ります。

/src/app/home/home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
      <ion-button expand="block" fill="outline" (click)="presentModal()">ion-modal表示</ion-button>
  </div>
  {{returnedData}} <!–モーダルから受け取った文字列を表示–>
</ion-content>

/src/app/home/home.page.ts

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage} from '../modal/modal.page';
import { ActivatedRoute} from '@angular/router'; 

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  returnedData: any;
  constructor(
    private modalCtrl: ModalController,
    private activatedRoute: ActivatedRoute,
  ) {
  }
  async presentModal() {
    const modal = await this.modalCtrl.create({
      component: ModalPage,
      componentProps: { parameter: 'home→modal' },
      cssClass: 'custom-modal-css'
    });

    modal.onDidDismiss().then((returnedData) => {
      if (returnedData !== null) {
        this.returnedData = returnedData.data; //モーダルから受け取った文字列
      }
    });
    return await modal.present();
  }
}

/src/app/modal/modal.page.ts

import { Component, OnInit } from '@angular/core';
import { ModalController, NavParams } from '@ionic/angular';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.page.html',
  styleUrls: ['./modal.page.scss'],
})
export class ModalPage implements OnInit {
  parameter: string;
  constructor(
    private modalCtrl: ModalController,
    private navParams: NavParams,
  ) { }

  ngOnInit() {
    this.parameter = this.navParams.data.parameter;
  }

  close() {
    this.modalCtrl.dismiss('modal→home');
  }
}

モーダルを閉じると、以下のようにモーダルから受け取ったデータが表示されます。

おわりに

ion-modalでのデータの受け渡しを試してみました。
基本的にはページ遷移でのパラメータの受け渡しと同じで、簡単でした。

参考