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 사용합니다.

첫 페이지:

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

export class HomePage {

 constructor(public modalCtrl: ModalController) {

 }

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

}

두 번째 페이지 :

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

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

}