Explicacion eventos de vistas Ionic 3 – Lifecycle events

Hoy explicaremos que es lo que hace cada uno de los eventos de vistas Ionic traducidos del inglés Lifecycle events. Al terminar de leer esta entrada tendremos claro cuál de estos eventos debemos utilizar en cada caso.

Listemos primero los eventos de vistas por defecto en el framework Ionic 3

Los eventos de los cuales disponemos son los siguientes: ionViewDidLoad, ionViewWillEnter, ionViewDidEnter, ionViewWillLeave, ionViewDidLeave, ionViewWillUnload, ionViewCanEnter y ionViewCanLeave.

Como tenemos costumbre de hacer, vamos a ver una imagen de lo que vamos a construir.

En el proyecto de hoy conseguiremos mostrar una advertencia o mensaje de alerta en cada debido momento de vida de la aplicación, de este modo nos será muy fácil identificar cuándo se ejecuta cada uno y entenderemos cómo utilizarlos en proyectos futuros.

Explicación de los eventos de vistas.

• ionViewDidLoad: Este evento se lanza cuando la página ha terminado de cargar, hemos de tener en cuenta que si la página es cacheada no se lanzará la segunda vez ni posteriores.
• ionViewWillEnter: Se ejecuta cuando entras en una página, pero antes de ser cargada. De este modo podemos realizar acciones como llamar a una base de datos para actualizar los datos de la vista y posteriormente pintarlos en la propia vista.
• ionViewDidEnter: Se ejecuta cuando entras en una página, pero siempre después de que haya sido cargada y esté como página activa.
• ionViewWillLeave: Se llama justo antes de dejar una página. Podemos utilizar este evento para desactivar listeners, etc.
• ionViewDidLeave: Este evento se lanza justo cuando la página en la que estábamos ya no está activa.
• ionViewWillUnload: Se ejecuta cuando la página y todos sus eventos están a punto de ser destruidos (pop).

Explicación de los Nav Guards de vistas.

Tenemos dos métodos adicionales que están relacionados con los eventos anteriormente mencionados:

• ionViewCanEnter: Se lanza antes de que la vista pueda entrar, te permite controlar si realmente puedes entrar en la vista o no (devolviendo true o false).
• ionViewCanLeave: Se lanza antes de que la vista pueda salir y te permite controlar si realmente puedes salir de la vista o no.

Hagamos un proyecto demo.

Manos al código… no hay mejor forma de explicar los ejemplos. Empezamos como siempre creando nuestro proyecto Ionic.

ionic start eventos-pagina blank --v2

Y ahora accedemos al directorio del proyecto.

cd eventos-pagina

Durante la creación del proyecto sabemos que se crea por defecto el directorio /src/pages/home, pero nosotros vamos a necesitar una vista más para navegar entre ellas. Vamos a crear ahora la vista home2.

ionic generate page home2

Vamos a eliminar lo innecesario del proyecto.

Accedemos al directorio /src/pages/home2 desde nuestro editor de código y vamos a eliminar home2.module.ts.
Ahora en /src/pages/home2/home2.ts eliminamos @IonicPage() y eliminamos del import IonicPage,. También cambiamos export class Home2 { por export class Home2Page {.
Lo que vamos a hacer es sencillo, pues la finalidad de la entrada es que veamos cuando ejecuta la aplicación cada uno de los eventos comentados.

Creando textos y botón en la vista home.

Vamos a la vista /src/pages/home/home.html y dejamos el siguiente código.

<ion-header>
  <ion-navbar>
    <ion-title>
      Home
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  Nos encontramos en nuestra primera página.
  <p>
    <button ion-button full click="goHome2()">Ir a Home2</button>
  </p>
</ion-content>

Creando lógica en el controlador home.ts – Aplicando eventos de página.

Nos movemos ahora y abrimos el siguiente script: /src/pages/home/home.ts. Así es como debe quedar.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

// Importamos la página Home2 para poder hacer uso de ella.
import { Home2Page } from '../home2/home2';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  // Aquí declaramos el método para ir a la vista Home2
  goHome2()
  {
    this.navCtrl.push(Home2Page);
  }

}

Como podemos ver, en este controlador lo único que hemos añadido ha sido un método que corresponde a la acción del botón creado en su vista. Cuando pulsemos sobre el botón redireccionaremos a la página Home2 gracias a la línea this.navCtrl.push(Home2Page); y será en esta página donde trabajaremos con los eventos Lifecycle.

Creando textos y botón en la vista home2.

Vamos a la vista /src/pages/home2/home2.html y será aquí donde coloquemos el siguiente código.

<ion-header>
  <ion-navbar>
    <ion-title>
      Home 2
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  Nos encontramos en nuestra segunda página.
  <p>
    <button ion-button full (click)="goHome()">Volver a Home</button>
  </p>
</ion-content>

Al igual que vimos en la vista home, aquí lo único que presentamos es un título, un texto y un botón para llamar a un método del controlador, y será en este controlador donde creemos los eventos de ciclo de vida como veremos a continuación.

Creando lógica en el controlador home2.ts – Eventos de vistas Ionic.

Paso directamente el código del controlador ya que lo único que hemos hecho en el es añadir un import para poder ejecutar el método goHome() que es el que nos permitirá volver a la página de inicio. El resto de los métodos definidos son los eventos que hemos explicado a lo largo de la entrada.

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

// Importamos la página Home para poder hacer uso de ella.
import { HomePage } from '../home/home';

@Component({
  selector: 'page-home2',
  templateUrl: 'home2.html',
})
export class Home2Page {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewCanEnter() {
    alert('1 - Toc, Toc!!! ¿Puedo pasar? Se lanza antes de que la vista pueda entrar.');
  }

  ionViewDidLoad() {
    alert('2 - En este momento la página ha terminado de cargar.');
  }

  ionViewWillEnter() {
    alert('3 - Acabamos de entrar en la página.');
  }

  ionViewDidEnter() {
    alert('4 - Página completamente cargada y activa.');
  }

  ionViewCanLeave() {
    alert('5 - Toc, Toc!!! ¿Puedo salir? Se lanza antes de que la vista pueda salir.');
  }

  ionViewWillLeave() {
    alert('6 - ¿Estás seguro que quieres dejar la página?.');
  }

  ionViewDidLeave() {
    alert('7 - La página Home2 ha dejado de estar activa.');
  }

  ionViewWillUnload() {
    alert('8 - Página y eventos destruidos (Este evento no debería saltar.).');
  }

  // Aquí declaramos el método para ir a la vista Home2
  goHome()
  {
    this.navCtrl.push(HomePage);
  }

}

Declarando Home2 en el componente y modelo de la aplicación.

Recordemos que también necesitamos declarar las páginas en /src/app/app.component.ts, por lo tanto vamos a añadir el siguiente import:

import { Home2Page } from '../pages/home2/home2';

Y ahora hagamos lo mismo en el módulo: /src/app/app.module.ts, debemos añadir el import:

import { Home2Page } from '../pages/home2/home2';

… y añadir Home2Page en declarations y entryComponents.

Llegados aquí ya podemos ejecutar desde consola ionic serve -l para poder apreciar el resultado de nuestro ejemplo. Verás que nos salta un alert en cada momento preciso del ciclo de vida de nuestra aplicación. ¿Sencillo verdad?

Ah y recuerda!!!, si quieres estar al día acerca de la creación de nuevas entradas, no te olvides de suscribirte al blog.

[wysija_form id=»1″]

Versiones utilizadas, tiempo y dificultad de desarrollo:

Dificultad del ejercicio: Iniciación.
Tiempo de realización: 15 minutos.
Ionic Framework version: 3.1.1
Node versión: 7.7.3
NPM versión: 4.2.0
Cordova versión: 6.5.0
Sistema operativo: Windows 10