수색…
단순 모달
모달은 현재 페이지 상단에 표시되는 임시 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();
}
}
이 모달은 메시지를 표시합니다. 모달은 폐쇄하거나보기 컨트롤러 방법을 기각 사용하여 "기각"할 수 있습니다.
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>
집.
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);
}
}
등록 모달은 사용자가 입력 한 값으로 데이터 객체를 가져오고 매개 변수는 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>
집.
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 메소드에 전달할 때 home.html의 목록을 변경하여 모달을 엽니 다.
Home.html
<ion-list>
<ion-item *ngFor="let datum of data" (click)="openModalwithNavParams(datum)">
<h1>{{datum.name}}</h1>
</ion-item>
</ion-list>
집.
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();
}
}