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();
}
}