ionic2
모달

Android Angular 2 AngularJS Cordova CSS firebase ionic-framework iOS JavaScript TypeScript
수색…


단순 모달

모달은 현재 페이지 상단에 표시되는 임시 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();
  }
}


Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow