Header Ads Widget

Ticker

6/recent/ticker-posts

Ionic 5 / Modales angulares

 En este tutorial, veremos cómo usar modales en aplicaciones Ionic 5 / Angular creando una aplicación de demostración simple, ¡así que comencemos!

En primer lugar, debemos mencionar que estamos usando Ionic CLI 5, por lo que si aún no ha actualizado a esta versión, asegúrese de usar los comandos equivalentes para las versiones anteriores de Ionic CLI.

Generando un nuevo proyecto Ionic 5 / Angular

Antes de implementar nuestro ejemplo modal, primero generemos un nuevo proyecto Ionic 5 basado en Angular.

Continúe y abra la ventana de su terminal y luego escriba el siguiente comando:

ionic start ionic-modals blank --type=angular

A continuación, navegue dentro del directorio de su proyecto y entregue su aplicación usando el siguiente comando:

cd ionic-modals
ionic serve 

Debería poder visitar su aplicación yendo a la dirección http: // localhost: 8100 .

Importación y uso de ModalController

Abra src / pages / home / home.ts y luego importe ModalController de ionic-angular :

import { ModalController } from 'ionic-angular';

A continuación, necesitamos inyectar a través del constructor de componentes:

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController,public modalCtrl : ModalController) {

}

}

Abrir una página modal

El siguiente paso es agregar el openModal()método al HomePagecomponente y vincularlo a un botón en el home.htmlarchivo:

public openModal(){

}    

<button ion-button (click)="openModal()">Open Modal</button>

Antes de agregar una implementación para el openModal()método, primero agreguemos una nueva página para ser utilizada por nuestro modal.

Dirígete a tu terminal dentro de la carpeta de tu proyecto y ejecuta el siguiente comando:

ionic g page ModalPage

Luego, en el home.tsarchivo, use el create()método de ModalControllerpara crear un modal y luego muéstrelo:

public openModal () {var modalPage = this.modalCtrl.create ('ModalPage'); modalPage.present (); }

Ahora, si hace clic en el botón modal abierto, debería poder ver ventanas emergentes de una página modal.

Cerrar la página modal

Hemos agregado un método para abrir un modal, ahora agreguemos un método para cerrar la página modal una vez que se abre.

Abra el componente src / pages / modal / modal.tsthen add the closeModal () method to theModalPage`:

public closeModal(){

}

Luego abra el archivo src / pages / modal / modal.html y agregue un botón para cerrar el modal:

<ion-header>

<ion-navbar>
    <ion-title>ModalPage</ion-title>
    <ion-buttons end>
    <button ion-button (click)="closeModal()">Close</button>
    </ion-buttons>
</ion-navbar>

</ion-header>


<ion-content padding>

</ion-content>

Ahora implementemos el closeModal()método.

Primero necesitamos importar ViewControllerdel paquete ionic-angular :

import { ViewController } from 'ionic-angular';

Inyectar a ViewControllertravés del constructor de componentes:

export class ModalPage {

constructor(public viewCtrl : ViewController ) {
}    

A continuación, use el dismiss()método para cerrar el modal:

export class ModalPage {

constructor(public navCtrl: NavController, public viewCtrl : ViewController ,public navParams: NavParams) {
}
public closeModal(){
    this.viewCtrl.dismiss();
}

}

Pasar datos al componente de página modal

También puede pasar algunos datos a un componente de página modal utilizando el segundo parámetro del create()método. Los datos pasados ​​pueden ser de cualquier tipo: cadena, número u objeto.

Adelante, cambie el openModal()método para pasar algún objeto de datos:

public openModal(){
    var data = { message : 'hello world' };
    var modalPage = this.modalCtrl.create('ModalPage',data);
    modalPage.present();
}

Ahora obtengamos los parámetros pasados ​​usando NavParams:

@IonicPage()
@Component({
selector: 'page-modal',
templateUrl: 'modal.html',
})
export class ModalPage {

constructor(public navCtrl: NavController, public viewCtrl : ViewController ,public navParams: NavParams) {
}
public closeModal(){
    this.viewCtrl.dismiss();
}
ionViewDidLoad() {
    console.log('ionViewDidLoad ModalPage');
    console.log(this.navParams.get('message'));
}

}    

Conclusión

Este es el final de este tutorial. Hemos visto cómo usar modales en Ionic 5 / Angular.

Publicar un comentario

0 Comentarios