Ionic hardware back button just in tabs pages

Ionic Framework ionic-v3
1

Hi, i’m trying to implement hardware backbutton to close the app only when i’m one of the pages registered in my tabs.

I tryied to implement in my tabs.ts page and it extended to my entire app, so i put my code on the 4 views from the tabs, here is the core i have:

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

@Component({
  selector: 'page-usuario-amigos',
  templateUrl: 'usuario-amigos.html'
})
export class UsuarioAmigosPage {

constructor(public navCtrl: NavController, public plat: Platform, public alert: AlertController) {
    this.plat.registerBackButtonAction(() => {
        let confirm = this.alert.create({
            title: 'Sair',
            message: 'Deseja realmente fechar o FutClub?',
            buttons: [
                {
                    text: 'Nao',
                    handler: () => {
                        confirm.dismiss();
                    }
                },
                {
                    text: 'Sim',
                    handler: () => {
                        this.plat.exitApp();
                    }
                }
            ]
        });
        confirm.present();
    });
  }
}

i have this code on other 3 tabs page, but still it’s showing from every other pages.

What am i doing wrong? How can i let this ONLY on the tabs page?

1 Like
2

I don’t know if you are still looking for an answer on this question. I have made a workaround thats maybe not a something that is very nice, but its up to you what you think about it.

Just place this in every page that is a tab.
You can even do anything you want in the ionViewDidEnter, so if you want to let the user do something with an alert to confirm quiting, you can.

// register backbutton to quit the app if its on this page

            ionViewDidEnter() {
                   this.platform.registerBackButtonAction(() => {
                        this.platform.exitApp();
                   });
            }

// register backbutton to pop a page when on backbutton pressed
// If you switch from tabs then it will first do this method, and then on the other tab it will overwrite this action

            ionViewWillLeave() {
                this.platform.registerBackButtonAction(() => {
                    this.navctrl.pop();
                });
            }
3

I can’t seem to make the registerBackButtonAction method work at all.

Actually, I don’t even have the ‘backbutton’ event being fired when I tried adding event listener using plain JS. I am running the app inside a browser.

When I check the sourcecode, it seems that registerBackButtonAction is some platform specific action to be added by subclasses of Platform. If this is the case, how can I add back button event listener for Ionic 2 App running inside browser?

Versions:
Ionic: 2.1.0
Angluar: 2.2.1

Thanks in advance for any help.

4

@GabrielBarreto R u solve your problem, If Please help me because I also face the same problem.

5

I also anyone find out solution ??