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

#はじめに
ionicのモーダル画面([ion-modal](https://ionicframework.com/jp/docs/api/modal))でのデータ受け渡しの方法を紹介します。

以下の記事ではモーダル画面の作成方法とカスタマイズ方法を紹介しています。
[ionicのmodalをSCSSでカスタマイズする](https://qiita.com/se_fy/items/0f5026db137538ed1204)
この記事の続きとして書いていきます。
コピペで実装できます。

#モーダルへデータを渡す
今回はデータとして文字列`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表示ボタンを押下すると、以下のように渡したパラメータが表示されます。
![スクリーンショット 2020-05-08 11.44.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410068/7f9742a4-50f7-c229-0214-1032997ca62e.png)


#モーダルのデータを受け取る
モーダルから文字列`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');
  }
}
```
モーダルを閉じると、以下のようにモーダルから受け取ったデータが表示されます。
![スクリーンショット 2020-05-08 14.02.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410068/7a586656-2437-b645-060e-433f77421943.png)

#おわりに
[ion-modal](https://ionicframework.com/jp/docs/api/modal)でのデータの受け渡しを試してみました。
基本的にはページ遷移でのパラメータの受け渡しと同じで、簡単でした。

#参考
https://www.freakyjolly.com/ionic-modal-popovers-pass-receive-data/#.XrLKGhP7Q_U