【Ionic3】ModalCtrlに渡したPramsを外部から変更する

【やりたいこと】 1. ページ内でモーダル１を開く 2. モーダル１の上にモーダル２を開く 3. モーダル２で処理をして、モーダル１で処理したことを伝える

Modal Controllerに渡した変数の値を呼び出し元で更新してもモーダル内の値は更新されませんでした。

そこで、ModalControllerのインスタンスの値を直接変更することで対応しました。

Ionic的に推奨されるものではないと思いますけど、いい方法が思う浮かばなかったもので……。

// home.ts

import { Component } from '@angular/core';
import { NavController, ModalController } from 'ionic-angular';
import { TranslationWidth } from '@angular/common';
import { Modal_1Page } from "../modal-1/modal-1";
import { Modal_2Page } from "../modal-2/modal-2";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
  }

  showModal1() {
    const modal = this.modalCtrl.create(Modal_1Page, {
      text: 'まだ完了していない',
      onDone: () => {
        this.showModal2(modal);
      }
    });
    modal.present();
  }

  showModal2(modal) {
    this.modalCtrl.create(Modal_2Page, {
      onDone: () => {
        modal.data.text = '完了';
      }
    }).present();
  }
}

<!-- home.html -->

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

<ion-content padding>
  <p>モーダルを表示する</p>
  <button ion-button (click)="showModal1()">モーダル１表示</button>
</ion-content>

// modal-1.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-modal-1',
  templateUrl: 'modal-1.html',
})
export class Modal_1Page {
  onDone;
  text;

  constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController) {
    this.onDone = this.navParams.get('onDone');
  }

  ionViewWillEnter() {
    this.text = this.navParams.get('text');
  }

  done() {
    this.onDone();
  }

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

<!-- modal-1.html -->

<ion-header>
  <ion-navbar>
    <ion-title>modal-1</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<p>モーダル２の処理 : {{text}}</p>
<button ion-button (click)="done()">モーダル２の処理</button>
<button ion-button (click)="close()">閉じる</button>
</ion-content>

// modal-2.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-modal-2',
  templateUrl: 'modal-2.html',
})
export class Modal_2Page {
  onDone;
  text;

  constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController) {
  }

  ionViewWillEnter() {
    this.text = this.navParams.get('text') || '文字なし';
    this.onDone = this.navParams.get('onDone');
  }

  done() {
    this.onDone();
    this.viewCtrl.dismiss();
  }
}

<!-- modal-2.html -->

<ion-header>
  <ion-navbar>
    <ion-title>modal-2</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<p>モーダル２の処理</p>
<button ion-button (click)="done()">処理完了</button>
</ion-content>

modalCtrl.create(); のインスタンスの中にdataプロパティの中に、第二引数に渡したオブジェクトの情報が格納されています。

modal.data.text に新たな値を代入することで、modalの情報を外部から変更しています。

// home.ts

showModal2(modal) {
  this.modalCtrl.create(Modal_2Page, {
    onDone: () => {
      // ↓情報を更新
      modal.data.text = '完了';
    }
  }).present();
}

modal-1.ts では、ionViewWillEnter() でモーダルがアクティブになる度に text の情報を取得するようにしています。

// modal-1.ts

ionViewWillEnter() {
  this.text = this.navParams.get('text');
}

うーん。なにかこう、正攻法ではないような感じがメッチャありますね。

Angularアプリケーションプログラミング

山田 祥寛

Angularによる動的Webアプリケーション開発に必要となる知識が、この1冊で身に付きます!

Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉

榊原 昌彦

Ionicの最大の特徴は、UIデザインの良さです。海外には多くのユーザがいますが、その多くは「UIデザインがいいからIonicにした」と答えています。