ionic2
Modales
Buscar..
Modal simple
Modal es una interfaz de usuario temporal que se muestra en la parte superior de la página actual. Esto se usa a menudo para iniciar sesión, registrarse, editar opciones existentes y seleccionar opciones.
Veamos un ejemplo simple con los modales utilizados. Para empezar estamos creando un proyecto en blanco iónico. Creamos un modo simple que muestre un mensaje y salgamos al hacer clic en el botón. Para hacer eso primero estamos creando vista para nuestro modal.
Mensaje.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>
Mensaje.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();
}
}
Este modal muestra un mensaje. El modal se puede cerrar o "descartar" utilizando el método de desconexión de los controladores de vista.
Inicio.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>
Inicio.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();
}
}
Ahora estamos creando nuestra página de inicio importando el ModalController y nuestro modelo de datos MessagePage. El método de creación de ModalController crea modal para nuestro modelo de datos MessagePage que se guarda para controlar la variable myModal. El método presente abre el modal en la parte superior de nuestra página actual.
Modal con Parámetros en despedir:
Ahora sabemos cómo crear un modal. Pero qué pasa si queremos pasar algunos datos de modal a nuestra página de inicio. Para hacerlo, veamos un ejemplo con modal como Registro de la página que pasa parámetros a la página principal.
Registrarse.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>
Registrarse.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);
}
}
El registro modal obtiene el objeto de datos con valores ingresados por el usuario y los parámetros se pasan a nuestra página actual al descartar con el método de desconexión de viewControllers. Ahora se envían los parámetros.
Entonces, ¿cómo vamos a recuperar los parámetros en la página de inicio? Para hacerlo, estamos creando un botón en la página de inicio y llamamos Registrar modal al hacer clic. Para mostrar el usuario, estamos mostrando una lista.
Inicio.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>
Inicio.ts
import {ResisterPage} from '../register/register';
openModalParams(){
let modalWithParams = this.modalCtrl.create(ResisterPage);
modalWithParams.present();
modalWithParams.onDidDismiss((result) =>{
if(result){
this.data.unshift(result);
}
});
}
El método ViewController onDidDismiss se ejecuta cada vez que se cierra un modal. Si los datos se pasan como parámetros desde el modal, podemos recuperarlos utilizando el método onDidDismiss. Aquí los datos introducidos por el usuario se anexan a los datos existentes. Si no se pasan datos como parámetro, el valor devuelto será nulo.
Modal con parámetros en crear:
Pasar parámetros a un modal es similar a cómo pasamos valores a un NavController. Para hacerlo, estamos modificando nuestra lista en home.html para abrir un modal al hacer clic en un elemento de la lista y pasar los parámetros necesarios como un segundo argumento al método de creación .
Inicio.html
<ion-list>
<ion-item *ngFor="let datum of data" (click)="openModalwithNavParams(datum)">
<h1>{{datum.name}}</h1>
</ion-item>
</ion-list>
Inicio.ts
import {EditProfilePage} from '../edit-profile/edit-profile';
openModalwithNavParams(data){
let modalWithNavParams = this.modalCtrl.create(EditProfilePage,{Data: data});
modalWithNavParams.present();
}
Similar a otras vistas, usamos NavParams para recuperar los datos enviados desde la vista anterior.
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>
Editar-perfil.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();
}
}