ionic2
モーダル

単純なモーダル

モーダルは、現在のページの上部に表示される一時的なUIです。これは、ログイン、サインアップ、既存のオプションの編集、オプションの選択によく使用されます。

私たちはモーダルを使った簡単な例を見てみましょう。まず、イオンブランクプロジェクトを作成しています。メッセージを表示する単純なモーダルを作成し、ボタンクリックで終了しましょう。最初にこれを行うには、モーダルのビューを作成しています。

Message.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Modal
    </ion-title>
    <ion-buttons start>
      <button (click)="dismiss()">
        <span primary showWhen="ios">Cancel</span>
        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <h1>Modal Without Params is created successfully.</h1>
  <button full (click)="dismiss()"> Exit </button>
</ion-content>

Message.ts

import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';
@Component({
  templateUrl: 'build/pages/message/message.html',
})
export class MessagePage {
  viewCtrl;
  constructor(viewCtrl: ViewController) {
    this.viewCtrl = viewCtrl;
  }
  dismiss(){
    this.viewCtrl.dismiss();
  }
}

このモーダルはメッセージを表示します。モーダルは、View controllers dismissメソッドを使用して閉じたり、 "解除"することができます。

Home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Modal Example
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <button full (click)="openModal()">ModalWithoutParams-Message</button>
</ion-content>

Home.ts

import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import {MessagePage} from '../message/message';
@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  modalCtrl;
  data;
  constructor(modalCtrl: ModalController) {
    this.modalCtrl = modalCtrl;
    this.data = [{name: "aaa", email: "[email protected]", mobile: "1234567890", nickname: "zzz"},
      {name: "bbb", email: "[email protected]", mobile: "1234567890", nickname: "yyy"},
      {name: "ccc", email: "[email protected]", mobile: "1234567890", nickname: "xxx"}]
  }
  openModal() {
    let myModal = this.modalCtrl.create(MessagePage);
    myModal.present();
  }
}

今度は、 ModalControllerとデータモデルMessagePageをインポートするホームページを作成しています。 ModalControllerのcreateメソッドは、変数myModalを制御するために保存されたデータモデルMessagePageのモーダルを作成します 。 現在のメソッドは、現在のページの上にモーダルを開きます。

パラメータの消滅時のモーダル：

私たちは今、モーダルを作成する方法を知っています。しかし、モーダルから私たちのホームページにいくつかのデータを渡す場合はどうでしょうか。これを行うには、モーダルを使用して親ページにパラメータを渡すという例を見てみましょう。

Register.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Login
    </ion-title>
    <ion-buttons start>
      <button (click)="dismiss()">
        <span primary showWhen="ios">Cancel</span>
        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label>Name</ion-label>
      <ion-input type="text" [(ngModel)]="name"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Email</ion-label>
      <ion-input type="text" [(ngModel)]="email"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Mobile</ion-label>
      <ion-input type="number" [(ngModel)]="mobile"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Nickname</ion-label>
      <ion-input type="text" [(ngModel)]="nickname"></ion-input>
    </ion-item>
  </ion-list>
  <button full (click)="add()">Add</button>
</ion-content>

Register.ts

import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';
@Component({
  templateUrl: 'build/pages/register/register.html',
})
export class ResisterPage {
  viewCtrl;
  name;
  email;
  mobile;
  nickname;
  constructor(viewCtrl: ViewController) {
    this.viewCtrl = viewCtrl;
    this.name = "";
    this.email = "";
    this.mobile = "";
    this.nickname = "";
  }
  dismiss(){
    this.viewCtrl.dismiss();
  }
  add(){
    let data = {"name": this.name, "email": this.email, "mobile": this.mobile, "nickname": this.nickname};
    this.viewCtrl.dismiss(data);
  }
}

Register modalは、ユーザーが入力した値を持つデータオブジェクトを取得し、パラメータはviewControllers dismissメソッドを使用して閉じたときに現在のページに渡されます。これでパラメータが送信されます。

では、ホームページのパラメータをどのように取得するのでしょうか？これを行うには、ホームページにボタンを作成し、クリック時にモーダル登録を呼び出します。ユーザーを表示するために、リストを表示しています。

Home.html

<ion-list>
  <ion-item *ngFor="let datum of data">
    <h1>{{datum.name}}</h1>
  </ion-item>
</ion-list>
<button full secondary (click)="openModalParams()">ModalWithParams-Register</button>

Home.ts

import {ResisterPage} from '../register/register';

  openModalParams(){
    let modalWithParams = this.modalCtrl.create(ResisterPage);
    modalWithParams.present();

    modalWithParams.onDidDismiss((result) =>{
      if(result){
        this.data.unshift(result);
      }
    });
  }

ViewController onDidDismissメソッドは、モーダルが閉じられるたびに実行されます。データがモーダルからパラメータとして渡された場合、onDidDismissメソッドを使用してデータを取得できます。ここでは、ユーザーが入力したデータが既存のデータに追加されます。パラメータとして渡されるデータがない場合、戻り値はnullになります。

作成時のパラメータを持つモーダル：

パラメータをモーダルに渡すことは、NavControllerに値を渡す方法と似ています。そうするために、リスト項目をクリックし、必要なパラメータをcreateメソッドの2番目の引数として渡すときに、home.htmlのリストを変更してモーダルを開きます 。

Home.html

 <ion-list>
    <ion-item *ngFor="let datum of data" (click)="openModalwithNavParams(datum)">
      <h1>{{datum.name}}</h1>
    </ion-item>
  </ion-list>

Home.ts

import {EditProfilePage} from '../edit-profile/edit-profile';

  openModalwithNavParams(data){
    let modalWithNavParams = this.modalCtrl.create(EditProfilePage,{Data: data});
    modalWithNavParams.present();
  }

他のビューと同様に、NavParamsを使用して、前のビューから送信されたデータを取得します。

Edit-Profile.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Login
    </ion-title>
    <ion-buttons start>
      <button (click)="dismiss()">
        <span primary showWhen="ios">Cancel</span>
        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <h2>Welcome {{name}}</h2>
  <ion-list>
    <ion-item>
      <ion-label>Email</ion-label>
      <ion-input type="text" value={{email}}></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Mobile</ion-label>
      <ion-input type="number" value={{mobile}}></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Nickname</ion-label>
      <ion-input type="text" value={{nickname}}></ion-input>
    </ion-item>
  </ion-list>
  <button full (click)="dismiss()">Close</button>
</ion-content>

Edit-Profile.ts

import { Component } from '@angular/core';
import { ViewController, NavParams } from 'ionic-angular';
@Component({
  templateUrl: 'build/pages/edit-profile/edit-profile.html',
})
export class EditProfilePage {
  viewCtrl;
  navParams;
  data;
  name;
  email;
  mobile;
  nickname;
  constructor(viewCtrl: ViewController, navParams: NavParams) {
    this.viewCtrl = viewCtrl;
    this.navParams = navParams;
    this.data = this.navParams.get('Data');
    this.name = this.data.name;
    this.email = this.data.email;
    this.mobile = this.data.mobile;
    this.nickname = this.data.nickname;
    
  }
  dismiss(){
    this.viewCtrl.dismiss();
  }
}