ionic2
モーダル

モーダルの使用

モーダルは、一時的なUIを表示するために画面外にスライドします。ログインやサインアップページ、メッセージの構成、オプションの選択によく使用されます。

import { ModalController } from 'ionic-angular';
import { ModalPage } from './modal-page';

export class MyPage {
  constructor(public modalCtrl: ModalController) {
  }

  presentModal() {
    let modal = this.modalCtrl.create(ModalPage);
    modal.present();
  }
}

注：モーダルは、ユーザーの現在のページを上書きするコンテンツペインです。

モーダルによるデータの受け渡し

Modal.create()を介して新しいモーダルにデータを渡すことができます。その後、開いたページからNavParamsを注入してデータにアクセスできます。モーダルとして開いたページには特別な「モーダル」ロジックはNavParamsませんが、 NavParamsは標準ページとNavParamsません。

一ページ目：

import { ModalController, NavParams } from 'ionic-angular';

export class HomePage {

 constructor(public modalCtrl: ModalController) {

 }

 presentProfileModal() {
   let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });
   profileModal.present();
 }

}

2番目のページ：

import { NavParams } from 'ionic-angular';
export class Profile {

 constructor(params: NavParams) {
   console.log('UserId', params.get('userId'));
 }

}