Ionic 2 - 如何处理backButton

Question

I want to add a native backButton event handler in Ionic2. Problem is that Ionic2 documentation says to use registerBackButtonAction method of Platform instance, but there's no such method.

Instead of registerBackButtonAction , there is backButton property which is EventEmitter type (but it's not working, or I do not know how to subscribe).

Any ideas? Marcin

Answer 1

You can handle with angular2 routerOnActivate.. location .back()

     <button danger (click)="navigateBack()">Danger</button>

Your ts file contains

    // Import    
    import {ComponentInstruction} from '@angular/router-deprecated';

    // Class
    export class ViewImagePge {
    public prev: ComponentInstruction;
    } 

    public routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction): void {
      this.prev = prevInstruction;
    }

    // navigateBack() Function

    public navigateBack(): void {
    if(this.prev && this.prev.routeName === 'Foo') {
          this.location.back();
        } else {

          // can keep default path

          this.router.navigate(['/Foo']);
        }
    }

Answer 2

i was dealing with hardware backbuttons few days and now, after asing mike (from ionic) i know whats the problem.

The problem is that they dont have priorities hierachy. By default there is only one action with default priority value (0) and that action handle everything.

So if you want to add custom actions you need to add the default code action in your action if not you will be overriding and will not close sidemenu for example.

I have a demo on github with a backbutton service and a sidemenu with two pages. In page 1 i have a double click to exit app and on page 2 the default, on both pages i handle the sidemenu to close instead of show the toast.

For the moment not handle modals but i want to add it asap.

hope this can help you.

Answer 3

You can use below code. It works on back button pressed of mobile device

platform.registerBackButtonAction(function () {

    if(menu.isOpen())
              {
                menu.close();
              }else
              {
                nav.pop();  
              }          
    }, 100);