Manejando el Hardware back button en ionic 5

Ionic 5 logo

El Hardware back button es el boton que tienen los dispositivos para ir hacia atras. Normalmente tiene el icono < en la barra de acciones.

La documentacion de ionic hardware back button comenta que NO debemos confundirlo con el componente ion-back-button

Aunque la documentación nos da algo de información de como utilizarlo no nos provee mucha información de como manipularlo a nuestro gusto.

¿Cómo es el uso?

El uso de este evento es una suscripción al método backButton del la clase Platform y el callback se va a ejecutar. A parte de que el botón hará su función por defecto.

import { Platform } from '@ionic/angular';

// ...

constructor(private platform: Platform) {
  this.platform.backButton.subscribe(() => {
    console.log('Back button presionado!');
  });
}

Prioridades en el hardware back button

Existe el metodo subscribeWithPriority que nos permite suscribirnos a la función del botón varias veces y añadirle una prioridad.

Ejemplo:

import { Platform } from '@ionic/angular';

// ...

constructor(private platform: Platform) {
  this.platform.backButton.subscribeWithPriority(5, () => {
    console.log('Después me toda a mi!');
  });

  this.platform.backButton.subscribeWithPriority(10, (nextHandler) => {
    console.log('Tengo prioridad máxima!');

    nextHandler();
  });
}

El metodo subscribeWithPriority recibe por parámetro una función que debe ser ejecutada para pasar al siguiente manejador. si no se ejecuta ahi muere el evento.

¿Se puede deshabilitar?

Podemos deshabilitar la funcionalidad totalmente de nuestra aplicación con la configuración en el app.module.ts

import { IonicModule } from '@ionic/angular';

@NgModule({
  // ...
  imports: [
    // ...
    IonicModule.forRoot({
      hardwareBackButton: false
    }),
    // ...
  ],
  // ...
})

Esto va a hacer que no funcione el botón ni las suscripciones

Es posible que queramos solamente que el usuario no valla hacia atrás y querer implementar una lógica cuando el usuario presione el botón

solo con suscribirse con prioridad y no ejecutar la función del parámetro te puede servir

import { Platform } from '@ionic/angular';

// ...

constructor(private platform: Platform) {
  this.platform.backButton.subscribeWithPriority(1, () => {
    console.log('Solo yo!');
  });
}

Por alguna razón que desconozco, en un proyecto en el que trabajé, esta función con prioridad no funcionó en el componente ion-modal

Lo que me tocó personalizar toda mi aplicación.

Estoy seguro que esta alternativa se puede mejorar y es con Hostlisteners

Yo buscaba que mi modal no se cerrara cuando usaba el back button, y la suscripción no funcionaba. Por más que busqué en internet no di con la respuesta.

en mi clase ModalPage, use el siguiente método:

import { Platform } from '@ionic/angular';
import { /*...*/ , HostListener } from '@angular/core';
// ...

constructor(private platform: Platform) {

  @HostListener('document:backButton', ['$event'])
  async backButtonHandler($event: any) {
      
  }

}

Esto va a funcionar aunque en nuestra configuración tengamos hardwareBackButton: false

El problema de esta técnica es que si la usamos en la misma vista que abre el modal, también se ejecuta, entonces habrá que hacer una condición para saber si la modal está abierta.

import { Platform } from '@ionic/angular';
import { /*...*/ , HostListener } from '@angular/core';
// ...

private isOpen:boolean = false

// ...

constructor(private platform: Platform) {

  @HostListener('document:backButton', ['$event'])
  async backButtonHandler($event: any) {
    if( !this.isOpen ){
        // Tu lógica
    }
  }

}

async openModal(){
  this.isOpen = true  
  // ..
}

Estoy seguro que se puede mejorar esta alternativa.

Espero que les sirva, si les gustaría aportar algo, escríbanme en twitter

Artículos que podrían gustarte