En el desarrollo de aplicaciones con Ionic, comprender cómo y cuándo se activan los diferentes estados de una página es fundamental para gestionar recursos, inicializar datos o controlar el flujo de navegación. El framework proporciona una serie de "hooks" o ganchos de ciclo de vida que permiten ejecutar lógica específica en momentos clave.

1. Ganchos de ciclo de vida principales

Ionic ofrece seis eventos principales que se disparan durante la navegación entre vistas. A diferencia de los componentes estándar de Angular, estos están diseñados específicamente para el stack de navegación de Ionic.

ionViewDidLoad

Este evento se ejecuta cuando la página se ha cargado en memoria. Es importante destacar que solo se activa una vez por instancia de página. Si el usuario sale de la vista y regresa, el hook no volverá a ejecutarse a menos que la página haya sido destruida previamente. Es el lugar ideal para configuraciones iniciales o peticiones de datos únicas.

ionViewWillEnter

Se dispara cuando la navegación está a punto de comenzar y la página está por convertirse en la vista activa. A diferencia del anterior, se ejecuta cada vez que el usuario entra en la página.

ionViewDidEnter

Se activa una vez que la transición de entrada ha finalizado y la página es completamente visible para el usuario. Es útil para iniciar animaciones o procesos que requieren que la interfaz esté lista.

ionViewWillLeave

Indica que el usuario está por abandonar la página actual (la transición de salida ha comenzado). Se puede utilizar para detener tareas en segundo plano o cancelar suscripciones.

ionViewDidLeave

Se ejecuta cuando la página ha terminado de salir y ya no es la vista activa. La página aún reside en el stack de navegación pero está oculta.

ionViewWillUnload

Este hook ocurre justo antes de que la página sea destruida y sus elementos eliminados por completo. Es el momento definitivo para la limpieza de memoria.

Ejemplo de implementación de eventos

A continuación, se muestra cómo integrar estos métodos dentro de un componente de página típico:

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

@Component({
  selector: 'page-detalle',
  templateUrl: 'detalle.html',
})
export class DetallePage {
  identificador: string;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.identificador = this.navParams.get('id');
    console.log('1. Constructor: Clase instanciada');
  }

  // Ejecución única tras la carga
  ionViewDidLoad() {
    console.log('2. ionViewDidLoad: Recurso cargado en memoria');
  }

  // Ejecución recurrente al entrar
  ionViewWillEnter() {
    console.log('3. ionViewWillEnter: La transición de entrada inicia');
  }

  ionViewDidEnter() {
    console.log('4. ionViewDidEnter: El usuario ya ve la página');
  }

  // Ejecución recurrente al salir
  ionViewWillLeave() {
    console.log('5. ionViewWillLeave: Iniciando salida de la vista');
  }

  ionViewDidLeave() {
    console.log('6. ionViewDidLeave: La página ya no es visible');
  }

  ionViewWillUnload() {
    console.log('7. ionViewWillUnload: Eliminando recursos de la página');
  }
}

2. Guardias de navegación (Navigation Guards)

Además de los eventos informativos, Ionic proporciona dos ganchos que actúan como "centinelas". A diferencia de los anteriores que devuelven void, estos requieren un valor booleano (o una Promesa/Observable que resuelva a booleano) para permitir o denegar el acceso o la salida.

ionViewCanEnter

Se ejecuta antes de que el usuario entre en la página. Si devuelve false, la navegación se cancela. Es extremadamente útil para sistemas de autenticación o verificación de permisos.

ionViewCanLeave

Se dispara cuando el usuario intenta abandonar la página. Si devuelve false, el usuario permanece en la vista actual. Se suele utilizar para confirmar si el usuario desea salir sin guardar cambios en un formulario.

// Ejemplo de restricción de acceso por lógica de negocio
ionViewCanEnter(): boolean {
  const horaActual = new Date().getHours();
  
  // Bloquear acceso si es antes de las 8 AM
  if (horaActual < 8) {
    console.error('Acceso restringido: El sistema no está operativo');
    return false;
  }
  return true;
}

// Ejemplo de confirmación de salida del usuario
ionViewCanLeave(): boolean {
  const respuesta = confirm("¿Tiene cambios sin guardar, desea salir de todas formas?");
  return respuesta;
}

Resumen de comportamiento

Para una gestión eficiante del flujo de la aplicación, considere este esquema de ejecución:

• Carga inicial: ionViewCanEnter → ionViewDidLoad → ionViewWillEnter → ionViewDidEnter.
• Salida de página: ionViewCanLeave → ionViewWillLeave → ionViewDidLeave → ionViewWillUnload.